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

猜你喜欢