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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 跨域方法:1、跨子域iframe2、JSONP缺点:只支持get方法;后端代码要调整3、CORS本地如何模拟跨域修...
    爱笑的疯小妞阅读 3,280评论 0 1
  • 题目1.什么是同源策略? 同源策略(Same origin Policy): 浏览器出于安全方面的考虑,只允许与本...
    FLYSASA阅读 5,706评论 0 6
  • 前端开发中,跨域使我们经常遇到的一个问题,也是面试中经常被问到的一些问题,所以,这里,我们做个总结。小小问题,不足...
    Nealyang阅读 3,345评论 0 0
  • <转>详解跨域(最全的解决方案) 什么是跨域跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,...
    涅槃快乐是金阅读 10,360评论 0 3
  • 诗/安依依 窗外夜色凉如美,遥挂家乡镜明月。 离家已有过月半,远方小女思断肠。 梦寐以求将归去,愿君一切常安乐。
    安依依1阅读 1,459评论 0 1

友情链接更多精彩内容