CORS跨域问题

之前做过一个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请求无法处理