Nginx 解决跨域

一、前言
当我们进行开发时,经常会遇到跨域问题,这种情况常见的话一般分为以下几种:
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";
    }

其中: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”的类型请求导致的。

微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?