Nginx 前端配置跨域问题，麻烦老哥们指点下

[dany813]

之前每次都是后端 Java 老哥，配的 CORS 跨域，这次一个新项目，我看老哥还没配置跨域，就想着自己先用 Nginx 配置下 现在遇到一点问题 首先贴一下我的 Nginx 配置

   server {
        listen       8008;
        server_name  localhost;
        # 根路径指到 index.html
        location / {
            root   html;
            index  index.html index.htm;
        }
        location /df-share {
            add_header 'Access-Control-Allow-Origin' *;
            add_header 'Access-Control-Allow-Credentials' 'true';
            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';


            if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' *;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Length' 0; return 200;
                }

              proxy_pass http://139.217.96.70; # 转发地址
         }
        error_page   405 =200 @405;
        location @405{
            add_header Content-Length 0;
            add_header Content-Type text/plain;
            add_header Access-Control-Allow-Headers *;
            add_header Access-Control-Allow-Methods *;
            add_header Access-Control-Allow-Origin *;
            return 200;
        }
  }

前端调用的 API 地址

http://localhost:8008

现在页面上是没有跨域的显示了，但是每次请求的时候只发送了一个 OPTIONS 请求，之前正确的情况应该，先一个 OPTIONS 请求，后面跟一个正确的请求， 下面截图是发送的 OPTIONS 请求 我 Nginx 哪里配错了吗，求老哥们指导下

[vampuke]

跨域好像不是这么用的。。。

[dany813]

@vampuke 额 我也是第一次这样搞，那该怎么用呢

[jay4497]

if ($request_method = 'OPTIONS') 那段多余了吧，而且还 return 了，删掉试试？

[aaahhh123]

马克 下班了看

[onfuns]

$request_method = 'OPTIONS' 这段删掉，OPTIONS 是复杂请求时的预检，检查请求头是否正确，浏览器触发，不用单独处理，除非用到 cookie 时再过滤掉就行，OPTIONS 是不带 cookie 和参数的。你这里直接 retuen 掉就出错了。

[dany813]

@jay4497 去掉就会出现跨域的问题

[dany813]

@onfuns 我现在这边是每个请求都先发一个预检，去掉的话，请求就是 403 Invalid CORS request

[jay4497]

@dany813 只去掉 return 段呢？

[dany813]

@jay4497 还是 403 Invalid CORS request

[webfrogs]

改下 OPTIONS 里的 `add_header 'Access-Control-Allow-Origin' "$http_origin";` 试试呢～～

[vance]

试试
location /df-share {
add_header 'Access-Control-Allow-Origin' $http_origin;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}

proxy_pass http://139.217.96.70;
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_set_header X-Forwarded-Proto $scheme;
proxy_connect_timeout 5;
}

[jay4497]

配置的这个 server 段只是个代理吧，没跑其它的话，location /df-share 段没必要，这个里边的去掉判断 OPTIONS 的那段全部移到 location / 下，我测试的是可以的。。。

[dany813]

@vance 老哥 你这个配置和我现在的配置，都能解决跨域，但是前端还是只会发送一个 option 的请求，后面那个正式的请求没有发送

[dany813]

@jay4497 好的 我去试下

[auser]

不要在 nginx 配置中使用 if 原因见官方的文档
因此添加响应头的代码应该放在程序代码里
随后的跨域问题就是把几个相关的 header 加上
具体参考见 MDN 网站相关章节

[zado]

只会发送一个 option 的请求可能是 nginx 返回的 option 规则不符合接下来的请求，所以浏览器把接下来的请求屏蔽了。
根据你下次请求的，试试改变或补充一下 option 规则。贴一下我网站上正在使用规则：
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization, Accept, Range, Origin
Access-Control-Max-Age: 864000