• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录

Mark的小试牛刀

  • 博客园
  • 联系
  • 订阅
  • 管理

公告

View Post

nginx配置 解决ajax请求跨域问题

文章来源:http://to-u.xyz/2016/06/30/nginx-cors/

背景描述

最近在研究RESTful API接口设计,使用的是Nginx,
要实现本地http://127.0.0.1跨域访问服务器端http://api.zlzkj.com,
并且要支持DELETE PUT等请求。

跨域配置

只需要在Nginx配置文件里加入以下配置,即可开启跨域

add_header Access-Control-Allow-Origin *;

*代表任何域都可以访问,可以改成只允许某个域访问,如Access-Control-Allow-Origin: http://www.zlzkj.com。
这样的配置虽然开启了跨域请求,但只支持GET HEAD POST OPTIONS请求,使用DELETE发起跨域请求时,浏览器出于安全考虑会先发起OPTIONS请求,服务器端接收到的请求方式就变成了OPTIONS,所以引起了服务器的405 Method Not Allowed。

 

所以要对OPTIONS请求进行处理

if ($request_method = 'OPTIONS') { 
    add_header Access-Control-Allow-Origin *; 
    add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
    #其他头部信息配置,省略...
    return 204; 
}

当请求方式为OPTIONS时,设置Allow的响应头,重新处理这次请求。
配置好并重启Nginx,刷新页面重新发起请求,在控制台里你会发现,出现了二次请求,
第一次是OPTIONS请求,第二次才是DELETE请求,这就是对OPTIONS请求进行处理的结果,到这里总算完成了一次DELETE跨域请求了。

完整配置参考

add_header Access-Control-Allow-Origin *;
location / {
    if ($request_method = 'OPTIONS') { 
        add_header Access-Control-Allow-Origin *; 
        add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
        return 204; 
    }
    index index.php;
    try_files $uri @rewriteapp;
}

  

放到配置文件的server {}里

参考文章

http://www.rails365.net/articles/cong-kua-yu-dao-cors-yi
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
https://segmentfault.com/q/1010000005837213

posted on 2017-12-06 14:29  我是天才啊  阅读(7470)  评论(1)    收藏  举报

刷新页面返回顶部
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3