Ajax跨域问题及解决方案

最新推荐文章于 2022-10-16 16:16:47 发布

ey..

最新推荐文章于 2022-10-16 16:16:47 发布

阅读量335

点赞数

本文链接：https://blog.csdn.net/weixin_47863547/article/details/112969008

版权

关键词由CSDN通过智能技术生成

为什么会出现跨域问题

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。

原生ajax 在请求接口的时候，如果使用的是本地服务器。

 http://localhost:63342/main/index.html
 https://sp0.baidu.com/s?wd=1

不一致会产生跨域

协议不一样 http https
主机名称不一致 localhost 127.0.0.1 sp0.baidu.com 124.3.9.2
端口号不一致 63342 80
报错 Access-Control-Allow-Origin 产生跨域

遇到ajax跨域问题，浏览器的错误如下：

XMLHttpRequest cannot load http://目标地址No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://当前页面地址’ is therefore not allowed access.

解决跨域问题

1.cros跨域（跨域资源共享)

在后端 java php node 配置配置响应头 header(“Access-Control-Allow-Origin”,"*"); 允许所有来访问
如果需要指定某域名才允许跨域访问，只需把Access-Control-Allow-Origin:*改为Access-Control-Allow-Origin:允许的域名

例如：response.setHeader(“Access-Control-Allow-Origin”,”http://www.client.com”);

在被请求的Response Header中加入如下代码：

// 指定允许其他域名访问 
response.setHeader("Access-Control-Allow-Origin", "*");
// 响应类型 
response.setHeader("Access-Control-Allow-Methods", "POST");
// 响应头设置 
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");

cros缺点：
1、此种解决跨域方案，需要浏览器支持H5，因为这是HTML5解决跨域的方式，如果产品面向的是PC端，这种方式可能就不是一个好的解决方案，如果面向的是手机端，此方法不为一个简单、粗暴的好方式。
2、设置*，存在安全隐患。

2.jsonp跨域(不是原生ajax 都是get请求)

jsonp解决跨域问题的原理是，浏览器的script标签是不受同源策略限制的，我们可以在script标签中访问任何域名下的资源文件。利用这一特性，用script标签从服务器中请求数据，同时服务器返回一个带有方法和数据的js代码，请求完成，调用本地的js方法，来完成数据的处理。
比较一下json与jsonp格式的区别：

json格式：

{
    "message":"获取成功",
    "state":"1",
    "result":{"name":"工作组1","id":1,"description":"11"}
}
jsonp格式：

callback({
    "message":"获取成功",
    "state":"1",
    "result":{"name":"工作组1","id":1,"description":"11"}
})