在前后端分离的项目里,一般都会遇到前后端跨域的问题。
之所以出现这个问题,网上有很多,这里就不再赘述了。
实现的方法也有不少,比如在后端spring boot的config文件中重写addCostMappings方法以达到跨域。或者在前端vue中创建一个vue.config.js文件实现跨域。这里重点采用的是使用nginx的反向代理的方式实现跨域。
反向代理
首先说说反向代理。用户与服务器之间的ip地址,协议,端口号有一项不同都是跨域。而nginx的反向代理便是解决这个跨域问题。
如图所示,用户通过访问nginx的反向代理服务器,通过nginx服务器的中介来访问tomcat服务器以达到跨域的方式。
主要配置
找到自己前后端的ip地址
我的项目采用的是vue+spring boot的方式,都是在win10系统中。打开cmd输入指令
ipconfig
找到自己的ip地址,如我的就是 192.168.2.226。
vue项目的服务器端口一般是8080端口,后端spring boot在yml文件中修改端口为8181.
找到nginx服务器的ip地址
在自己的开发过程中,配置服务器需要自己的IP地址。在里的nginx服务器是在vmware虚拟器中配置的。通过终端命令
ifconfig
查找虚拟机的IP地址。比如我的虚拟机的地址就是 192.168.2.223
nginx的默认端口为80端口,这个可以根据实际的情况进行更改。
有些这些准备工作之后便可以进行nginx的配置了。
配置nginx
找到nginx的配置文件。 在 /usr/local/nginx/conf的文件下。
打开配置文件nginx.conf
# 在server块中配置监听的端口以及nginx的IP地址
server {
listen 80;# 根据实际情况进行修改
server_name 192.168.2.223;# 自己nginx服务器的ip地址
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
}
在local块中添加映射规则
location / {
add_header Access-Control-Allow-Origin *;# tage1
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';# tage2
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';# tage3
if ($request_method = 'OPTIONS') {# tage4
return 204;
}
root html;
proxy_pass http://192.168.2.226:8181;# 自己后端服务器的ip地址与端口
index index.html index.htm;
}
以上便将nginx的跨域问题配置好了。需要进行修改的地方,在后面都进行注释了。
tage注释
在网上看到许多配置nginx服务器的反向代理的是只配置一个
proxy_pass http://ip与端口;
这样的配置也可以达到跨域的目的,但是只能访问静态文件,不能访问接口。
但是加上这三个配置之后
add_header Access-Control-Allow-Origin *;# tage1
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';# tage2
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';# tage3
他只能发送get请求,一旦发送post请求会报错
报错信息为:
Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
需要添加上tage4的一个判断条件,这个是浏览器在判断是否允许跨域请求时发送的options请求。
if ($request_method = 'OPTIONS') {# tage4
return 204;
}