nginx 代理解决跨域问题

Posted 2021-06-30 李公子lm

前言

可能在某些时候我们的前端项目需要访问一些外部的接口，比如Apollo等，而直接使用axios发送请求的话，会报跨域的错误，具体什么是跨域这里就不啰嗦了，如下图。

这个接口地址当然是正确的，可以放到接口测试工具里试一下。

解决跨域有很多种方式，但是大多数方式都需要服务端配合，这里加一句题外话，.Net Core项目如果允许跨域的话，可以在StartUp.cs里添加如下的配置。

  app.UseCors(builder => builder.AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader());

 var origins = new[]
 {
       "http://localhost:1803"
   };
   services.AddCors(option => option.AddPolicy("cors", policy =>        policy.AllowAnyHeader().AllowAnyMethod().AllowCredentials().WithOrigins(origins)));

使用nginx如何解决跨域

好了，言归正传，在nginx中，如何配置代理解决跨域问题。
首先分析一下接口。

  axios.get('http://localhost:1803/configfiles/json/easy-shop/default/application').then(res=>{
          console.log(res,"1")
        })

正常访问apollo的接口的端口号是8080，但是在项目里，需要配置成当前项目的端口号，因为在nginx中是做了转发，通过接口地址后的configfiles进行匹配，所以转发之后的接口地址依然是http://localhost:8080/configfiles/json/easy-shop/default/application。

nginx配置如下。

 server {
        listen       1803;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   D:\\MyProject\\apollotest\\capollo\\dist;
            index  index.html index.htm;
        }
		location /configfiles/ {
			proxy_pass http://localhost:8080;
		}
    }

通过上面的location下的proxy_pass 进行转发之后，就可以通过跨域获取数据了。

可以看到数据已经拿到了。

Study hard and make progress every day.