ajax跨域

跨域产生的原因：

浏览器有一个很重要的概念——同源策略(Same-Origin Policy)。所谓同源是指，域名，协议，端口相同。不同源的客户端脚本(javascript、ActionScript)在没明确授权的情况下，不能读写对方的资源。

ajax有一个同源策略，但咱们调用的接口来自于第三方网站，那这里必须跨域

什么情况下会产生跨域：

协议名://二级域名.一级域名.类型:端口号/目录1/文件名?参数1=值&参数2=值2&参数3=值3

1.协议不同
2.端口不同
3.主域不同
4.主域相同，子域不同
5.域名和ip

跨域解决方案

jsonp：前端+后端
CORS:服务端 ——CORS详情
代理（服务端代理，客户端代理）

ajax跨域错误提示：

大部分报错，只要有这句话 'Access-Control-Allow-Origin' 那么差不就是跨域了

//错误示例
Failed to load https://api.douban.com/v2/movie/search?q=%E7%BA%A2%E6%B5%B7%E8%A1%8C%E5%8A%A8: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8080' is therefore not allowed access.

vue代理实现：

打开vue脚手架->config->index.js，找到 dev: {

proxyTable: {
   '/v2':{
    target: 'https://api.douban.com',  //要代理的接口
    changeOrigin: true,  //实现跨域
    pathRewrite: {
      '^/v2': '/v2'
    }
   }

},

jsonp实现原理：动态创建script标签 ，因为script中的src有跨域能力

jsonp实现步骤：

前端实现：

第一步：动态创建script标签，并添加callback参数
第二步：要创建callback函数 例如：getdata

后端实现：

第一步：接收浏览器传递过来的callback函数
例如：$callback=$_GET['callback'];
第二步：返回函数调用形式，其内部的参数就是json
例如： echo $callback."(".$json.")";

jsonp缺点：只支持 get请求
jsonp优点：兼容性比较好 兼容：IE5+

————————
CORS解决跨域
php 实现的cors跨域：header('Access-Control-Allow-Origin: *');

缺点:只支持IE10+
优点：
1.前端无需改代码，
2.支持所有请求方式 包括：post,delete,put,get