js跨域访问问题

Posted 2022-06-06 kitor

1、什么是跨域访问

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。如果进行跨域访问，浏览器会报跨域访问异常

NO ‘Access Control-Allow-Origin‘ ....
CORS:Cross-orign resource sharing跨域分享资源

总之，当前页面你发送请求时只要协议、域名、端口号有一个与当前页面不一致都属于跨域访问。

2、跨域访问的解决方法

CORS解决方案

2.1 在Controller层的处理器上解决

后端解决方式一

//解决方法一：http://localhost:9105也可设置为*，表示那个域可以进行跨域访问，但是*号不能用cookie,允许访问的域
response.setHeader("Access-Control-Allow-Origin", "http://localhost:9105");
//----如果用了cookie信息-----，必须加后面这句话，如果不用cookie可以不加这句话
response.setHeader("Access-Control-Allow-Credentials", "true");

后端解决方式二

//解决方法二：在处理器方法上加注解，allowCredentials="true"，默认为false
@CrossOrigin(origins="http://localhost:9105",allowCredentials="true")

在端口号为9105的web前端也要处理，以AngularJS为例，在Service.js中添加如下内容‘withCredentials‘:true

//而且客户端的请求也需要加参数‘withCredentials‘:true )
$http.get(‘http://localhost:9107/cart/addItemToCartList.do?itemId=‘+?+‘&num=‘+? ,‘withCredentials‘:true ).success.....

JSOUP解决方案

2.2 JSONP

参考https://dailc.github.io/2017/03/22/ajaxCrossDomainSolution.html