Nginx 处理跨域请求 options

柔光的暖阳◎ 2021-09-17 14:26 1360阅读 0赞

把项目部署到测试环境，发现get和post跨域请求好使,delete，put，patch都不行

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYWh1YWxl_size_16_color_FFFFFF_t_70][]

这里看到Request Method是OPTIONS,百度了解了简单请求(GET,POST)和复杂请求(DELETE,PUT,PATCH)，参考转载的另一篇博文  [https://blog.csdn.net/xiahuale/article/details/85775671][https_blog.csdn.net_xiahuale_article_details_85775671]

复杂请求会预先发送options请求给服务器，服务器需要反馈一个成功的Response

解决方法，Nginx增加一个判断，如果是OPTIONS直接返回200

加入如下代码
    if ($request_method = 'OPTIONS') {
    	add_header Access-Control-Allow-Origin *;
    	add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,PATCH,OPTIONS;
            #支持put和delete请求
    	return 200;
    }
    
    在Nginx中这样配置
    location /xxx {
             if ($request_method = 'OPTIONS') {
    		 add_header Access-Control-Allow-Origin *;
    		 add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,PATCH,OPTIONS;
    		 return 200;
    	  }
    	  proxy_pass http://xxx/xx;	
    }

配置好后，再执行删除资源的操作，可以看到发两次请求

预先发送options请求

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYWh1YWxl_size_16_color_FFFFFF_t_70 1][]

收到服务器返回的200后，发送了delete

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYWh1YWxl_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYWh1YWxl_size_16_color_FFFFFF_t_70]: /images/20210605/b0e518ebbed943918c085bb467385d49.png
[https_blog.csdn.net_xiahuale_article_details_85775671]: https://blog.csdn.net/xiahuale/article/details/85775671
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYWh1YWxl_size_16_color_FFFFFF_t_70 1]: /images/20210605/46267f98786c49b0883725f0dd8ddd99.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYWh1YWxl_size_16_color_FFFFFF_t_70 2]: /images/20210605/fb6b6e774c2d4560ad9f45f6d99fea21.png