使用nginx部署vue项目出现跨域问题，如何解决？

Question

server {
    listen       80;
    server_name  192.168.160.36;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;
    location / {
        root   html/dist;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }
    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
 }

这个是我配置的nginx，发起请的时候报跨域问题
要代理的地址是192.168.160.7.:8000
如何解决

Answer 1

你的接口没配代理呀，当然会报错
加个接口的代理试试，可以参考下面配置代码

location /api {
  rewrite  ^/apis/(.*)$ /$1 break;
  proxy_pass http://192.168.160.7.:8000/api;
}

Answer 2

出现跨域的原因是由于浏览器发现前端页面和服务端接口属于不同域，所以才报跨域，比如你的前端页面是http://ip1:8080，但是服务端接口却是http://ip2:8888，那么就会出现跨域问题。

所以使用nginx来反向代理服务端，如前端请求http://ip1:8080/server，nginx将其转发至http://ip2:8888，这样对于浏览器来说访问的是同一个域，就不会有跨域问题了

Answer 3

nginx配置proxy_pass

server {
    listen       80;
    server_name  192.168.160.36;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;
    location / {
        root   html/dist;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }
    location /api/ {
            proxy_pass http://192.168.160.7:8000;
        }
    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
 }
}

我加了个/api/ 这样访问http://192.168.160.36/api/...的流量会被转发到192.168.160.7:8000

Answer 4

上面各位大佬已经讲的很详细了。
我推测你没有成功，可能是前端请求连接的配置上的问题。例如你前端请求用的是axios，配置的请求路径可以是 /api，直接相对路劲即可。然后参考上面几位的配置。
前端发起的请求你控制台可以看到的呀，看看是不是满足上面配置的格式:http://192.168.160.36/api/ ,先看这个对不对，再根据这个配置proxy。