Script 做API请求跨域问题

7 篇文章 0 订阅
5 篇文章 0 订阅

“Request header field ### is not allowed by Access-Control-Allow-Headers in preflight response.”

此句话告诉我们:您的请求头中的###不被接口提前允许。

Preflight response (提前允许): 前端跨域访问,当前端发起请求时,浏览器会先发起OPTIONS请求,如果服务器允许,返回响应,浏览器会再次发起原始的请求方式,返回需要的数据。意思浏览器会在响应成功的情况下发送两次请求:

跨域两次请求的转换

了解这些之后,解决跨域的问题一般会在代码中添加适应的Headers。例如:laravel框架中,就可以做一个中间件。

 return $next($request)
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Headers', 'x-requested-with,Content-Type,Authorization,Accept')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');

这其中的Headers的参数完全可以自定义,就不多赘述。

最想说的终于来了,就这样了千百遍,看过无数文档,都TMD的千篇一律告诉我在代码去找解决方法。

可是谁都没有想到使用的环境中,还一层Nginx代理做了服务层,这样您的跨域请求完全由Nginx处理了,所以Nginx不配置跨域请求,简直就是作死。

唉,直接贴代码了,您们看着办,我反正心灰意冷的感觉。

      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;
            add_header Access-Control-Allow-Headers x-requested-with,Content-Type,Authorization,Accept;

            return 204;
        }

走到这里,啥都不想说了,只能说自己太笨呗。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值