浏览器是网页的渲染着和执行者,为了安全,浏览器默认是不允许跨源请求的,即CORS跨域(跨域资源共享,Cross-Origin Resource Sharing)的,也就是说默认不允许从来自于A服务器上的页面中访问B服务器上的资源。(这里可以参考“同源”的概念)。

如果要想允许跨源访问,需要指示浏览器允许跨源访问,CORS约定中需要通过发送CORS标头(Access-Control-Allow-Origin:*)来达到目的。这个标头可以是web服务器在响应请求时发送,也可以嵌在html页面中。如果由web服务器发送,则不同的web服务器方法不一样,请查相应的web服务器配置方法,它的好处是会影响一批web页面。如果是嵌在html页面中,就在头部中嵌入,只影响本页面。

注意:标头是加在最终被访问资源处的,如果是第一段的情况,是加在B上,不是A上。浏览器的验证发生在B上的资源返回以后。

很不幸的是即使这样,有时候会出现“原因:CORS 预检响应的 'Access-Control-Allow-Headers',不允许使用头 'content-type')”这样的错误。这是因为CORS跨域请求又分为简单请求和复杂请求,你的请求属于复杂请求了。请参考CORS跨域简单请求和复杂请求的定义。要么把你的请求简单化(大部分情况下是可以的),要么配置另一个CORS标头(Access-Control-Request-Header),那就更复杂了。

简单请求需要满足如下条件:    请求方式只能是 get、post、head之一     请求头只能包含如下 accept、accept-lanuage、content-lanuage、content-type     content-type值只能是 application/x-www-form-urlencoded、multIpart/form-data、text/plain

其他的情况都是属于复杂请求,如果是复杂请求,浏览器会自作主张向同样的请求地址发送一个“options”请求,服务器需要处理该请求,并返回一些说明表示自己允许接下来的请求,这样浏览器才会正式发送用户的请求。

详细请参考:

前端网络基础 - 跨域xhr/fetch_xhr 跨域_伏城之外的博客-CSDN博客

推荐阅读

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: