Ajax跨域问题及解决方案

为什么会出现跨域问题

跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对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"}
})

从格式来看,jsonp是在json的基础上包装了一个方法名,此方法名是前端请求传过来的,如请求地址为:http://localhost:9999/tookApp/tbk/getItem?callback=JSONP_CALLBACK,那么方法名就是JSONP_CALLBACK。

jsonp的缺点:
1、JSONP是一种非官方的方法,而且这种方法只支持GET方法,不如POST方法安全。(从实现机制就可明白)。
2、JSONP的实现需要服务器配合,如果是访问的是第三方的服务器,我们没有修改服务器的权限,那么这种方式是不可行的。

上一篇:thinkphp6.0前后端分离跨域处理


下一篇:[nginx] - 使用nginx实现反向代理,动静分离,负载均衡,session共享