一、前言
当我们进行开发时,经常会遇到跨域问题,这种情况常见的话一般分为以下几种:
1、后台无法开放访问域,当我们调用接口时就会被浏览器拦截。
2、前后端分离,前端资源与后台数据库处于不同的服务器中。
当我们在进行访问时,nginx页面在加载时就会报错:CORS 问题,跨域存在问题。
可以利用nginx解决跨域
二、跨域解决方案
1、修改nginx的配置文件
location / { root /home/project/mini; index index.html index.htm; add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; 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'; proxy_pass http://localhost:8080/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; #proxy_http_version 1.1; #proxy_set_header Upgrade $http_upgrade; #proxy_set_header Connection "upgrade"; }
![复制代码](https://common.cnblogs.com/images/copycode.gif)
其中:proxy_http_version、proxy_set_header Upgrade、proxy_set_header Connection部分这里不会用到,为websocket部分配置。
2、修改完后,然后重启nginx
3、跨域参数解释
Access-Control-Allow-Origin:服务器默认是不被允许跨域的。给Nginx服务器配置Access-Control-Allow-Origin *后,表示服务器可以接受所有的请求源(Origin),即接受所有跨域的请求。
Access-Control-Allow-Methods:允许通过的方法,可以防止Content-Type is not allowed by Access-Control-Allow-Headers in preflight response的错误信息
Access-Control-Allow-Headers:为了防止出现Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response的错误信息。这个错误表示当前请求Content-Type的值不被支持。其实是我们发起了"application/json"的类型请求导致的。