nginx 解决前后端跨域问题（已解决）

背景：后端java+前端vueJS+elementUI。部署时，ngixn监听80端口映射静态页面，后台接口jar包启动，端口我这边是81。部署后报跨域错误，get |post请求没有问题，但是上传文件，解析文件时，提示跨域。我本地时运行正常的，之前部署的项目也没有问题，代码是一样的，很费解。报错如下：Access to XMLHttpRequest at 'http://121.37.159.2

涟洏心善

5415人浏览 · 2020-08-21 14:13:21

涟洏心善 · 2020-08-21 14:13:21 发布

背景：后端java+前端vueJS+elementUI。部署时，ngixn监听80端口映射静态页面，后台接口jar包启动，后端启动端口81。

部署后报跨域错误，get |post请求没有问题，但是上传文件，解析文件时，提示跨域。我本地时运行正常的，之前部署的项目也没有问题，代码是一样的，很费解。

报错如下：

Access to XMLHttpRequest at 'http://121.37.159.214:81/students/importStudentSession'
from origin 'http://121.37.159.214:8080' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access to XMLHttpRequest at from origin
has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决了一周，尝试修改了VUEJS代码，后台拦截器都不成功。

后参考 Nginx 配置反向代理 - 郑清 - 博客园

详细配置了ngxin反向代理，之前理解的不深，简单配置，没有成功就放弃了。这次成功了。

配置文件如下：

worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;

sendfile on;
keepalive_timeout 65;

server {
listen 80;
server_name localhost;

#charset koi8-r;

#access_log logs/host.access.log main;

location / {
root E:\idea_workspace\jxjw_web\dist;
index index.html index.htm;
}

       location ^~ /api {

           proxy_pass http://127.0.0.1:81/;
           proxy_set_header Host $host;
           # proxy_set_header作用：设置发送到后端服务器(上面proxy_pass)的请求头值
# 【当Host设置为 $http_host 时，则不改变请求头的值;

# Host http_host则是改变请求头的值改变后者的，

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr; # 在web服务器端获得用户的真实ip 需配置条件① 【 $remote_addr值 = 用户ip 】
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;# 在web服务器端获得用户的真实ip 需配置条件②
proxy_set_header REMOTE-HOST $remote_addr;
# proxy_set_header X-Forwarded-For $http_x_forwarded_for; # $http_x_forwarded_for变量 = X-Forwarded-For变量

       }

error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}

}

}

       location /zhuzaomes {
proxy_pass http://10.0.6.7:8090;
proxy_redirect off;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
       location /focus {
proxy_pass http://10.0.6.6:7001;
proxy_redirect off;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
       location /plat {
proxy_pass http://10.0.6.6:7001;
proxy_redirect off;
proxy_set_header Host $http_host;//此处改变了访问 www.xxx.com/plat 等同于

http;//10.0.6.6:7001/plat
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

关键在 location ^~ /api {proxy_pass http://127.0.0.1:81/;} 这里，之前我直接 /api 是报404，匹配不上的。

这样配置后，访问你的域名:80/api 就会转发到 81 端口，前端用80 就可以，这样域名端口就都一样了，不存在跨域了。

但是注意 : 1 、这些参数是要加上了，不然转发后，参数都丢失了，就报登录失败了。

proxy_set_header Host $host;
# proxy_set_header作用：设置发送到后端服务器(上面proxy_pass)的请求头值
# 【当Host设置为 $http_host 时，则不改变请求头的值
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr; # 在web服务器端获得用户的真实ip 需配置条件① 【 $remote_addr值 = 用户ip 】
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;# 在web服务器端获得用户的真实ip 需配置条件②
proxy_set_header REMOTE-HOST $remote_addr;

2 、这里还有一个坑 proxy_pass http://127.0.0.1:81/; 最后要加/斜杠。不然会报SpringSecurity认证失败的错误。

参考：https://www.cnblogs.com/hanstrovsky/p/11918890.html

至此， ngxin部署前后端分离项目，跨域问题完美解决。

转发请求只需最基本配置即可

 server {
        listen       8090;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        #location / {
          #  root   html;
        #    index  index.html index.htm;
       # }
		location / {
			 proxy_pass http://127.0.0.1:8099;
            
		
		}
		location ~ /kdzzy/ {  
			proxy_pass http://127.0.0.1:8099;
		}