CORS跨域问题

原文: https://blog.csdn.net/xyz_dream/article/details/78655900

之前做过一个APP遇到过跨域问题,之后来到公司采用前后端分离,也涉及到跨域问题。那么记录一下自己学习的过程。做个笔记。建议详细阅读阮一峰博客:http://www.ruanyifeng.com/blog/2016/04/cors.html


CORS(cross-origin-resource-sharing)跨域资源共享。由于浏览器安全策略基于”同源”的原则,当不符合”同源”策略的时候,特别是在ajax想实现提交请求获取数据时是不被允许的。何为”同源”? 简单理解”同源”的三个规则: 1.协议


2.域名 3.端口 。只要是这3点其中一点不符合,就会出现请求跨域问题。


举个例子现在有一个http://www.test.com网页,通过Jquery发送请求给https://www.test.com/api.php获取数据,渲染页面
,此时会报出跨域错误。查看浏览器console控制台就能看到错误。此时是http和https协议不一致,这两个协议不一致的同时也带来了端口的不一致(80和443)。 等等,只有三个条件同时满足才能遵守”同源”策略。但是常规的一个形式不准遵守”同源”策略,大家其实一直在使用,只是一时先改变想不起来之间的联系。没错,就是通过<link>引入css的href
以及 <script>的src引入js文件,浏览器不会认为是跨域问题。所以这个也是接下来要怎么解决跨域问题的一种方式。


解决跨域问题常见的2种方式:



1.JSONP


JSONP就是利用了和上述所说的<link><script>标签引入css和js文件的原理一样,之后请求url后面需要加入一个参


数callback=fun。fun的名称是自定义函数的名称,之后通过fun(data)的data就是获取到的数据。


举例: A通过js的DOM创建一个script元素,让src=http://www.test.com/api.php?callback=fun
,服务器会把数


据放入fun({‘name’:’test’})函数调用。通过在前端的一个变量获取到数据即可


JSONP只支持GET请求,若项目中跨域问题很少,简单,并且不涉及POST等复杂请求,推荐使用此方法。




2
.CORS标准


浏览器对我们做了透明的操作,如果发生跨域是,浏览器自动在请求头reqest header里面添加一个字段叫


origin:http://a.com,想服务器表明我这个请求来自于http://a.com的。服务器端收到请求,检查到origin字段说明是


跨域问题。然后检查服务器端允许跨域的域名是否有http://a.com 若服务器端通过,则会响应头添加Access-Control-


Allow-Origin: http://a.com 即可实现跨域。 实现细节,服务端响应头response header加入Access-Control-


Allow-Origin:源(协议://域名:端口)即可实现跨域。PHP后端添加 header(“Access-Control-Allow-Origin:http://a.com")


此时a.com就能实现跨域访问了。并且此方法支持POST和GET请求,功能比JSONP强大。若是整个项目都用到跨域


,建议采取此形式较为合理。毕竟JSONP的功能就仅仅只是通过GET请求,POST请求无法处理