跨站请求报错解决方法

为了实验,我们开2个Web服务器,一个监听在3000另一个监听3001端口,不妨称作站点A和站点B。下图是B站点通过AJAX访问A站点,可以看到有报错。
在这里插入图片描述
这是因为浏览器为了安全目的阻止了这个「跨站请求」,我们把这个策略叫做same origin policy。为了绕开这个限制,有一个规范:Cross-Origin Resource Sharing (CORS)。

CORS的基本原理是这样的。

  1. 浏览器发现B要跨站访问A的资源
  2. 浏览器向A发送一个HTTP请求,问:谁可以访问你的资源呢?它不是用GET方法也不是用POST方法,而是用OPTIONS方法
  3. A回复一个HTTP响应,这个HTTP的头部包含了一个信任的站点列表,我们把这个HTTP头部叫做:Access-Control-Allow-Origin
  4. 这样浏览器就知道站点B能不能访问站点A了

在步骤3中,需要站点A的程序员做一些开发工作,目的是构造合适的Access-Control-Allow-Origin。需要在HTTP头部中包含这几个字段:

Access-Control-Allow-Origin: http://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: Content-Type, Origin, Referer, User-Agent
Access-Control-Max-Age: 86400

如果允许所有站点访问,也可以用通配符,即:Access-Control-Allow-Origin: *。更多资料可以查阅CORS

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值