吴江市信诚精细化工有限公司

今天小编跟大家讲解下有关js跨域访问问题 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关js跨域访问问题 的相关资料，希望小伙伴们看了有所帮助。

什么是跨域访问

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

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

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

后端解决方法

在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"，[email protected](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.....

服务器反向代理

1、nginx反向代理解决跨域问题，找到nginx的配置文件“nginx.conf”，修改一下信息：

server { server_name_in_redirect off; location / { # 将下面的模板改为修改为你的项目地址 # alias /path/to/your/project/; alias /home/myProject/firmwareDepthAnalysisAndDetection/; //这是我的地址 } location /api { rewrite /api/(.+)$ /$1 break; proxy_pass http://10.10.2.254:8080; //这里写自己要访问的接口api } }

2、使用node.js实现反向代理，选用安装http-proxy模块

npm install http-proxy代码：// 导入http模块var http = require('http');// 导入http-proxy模块var httpProxy = require('http-proxy');// 提供服务的端口号var PORT = 1234;// 创建反向代理服务var proxy = httpProxy.createProxyServer();// 监听错误事件proxy.on('error', function (err, req, res) { // 输出空白响应数据 res.write('error!'); res.end();});// 创建服务var app = http.createServer(function (req, res) { // 执行反向代理 proxy.web(req, res, { // 目标地址 target: 'http://localhost:8080' });});// 启动服务app.listen(PORT, function () { console.log('server is running at %d', PORT);});

总结：创建了一个提供反向代理功能的服务器，该服务器启动后监听1234端口，接收到请求之后，将请求转发至目标地址（target）

jsONP

jsONP 是 jsON with padding（填充式 jsON 或参数式 JSON）的简写。JSONP实现跨域请求的原理简单的说，就是动态创建<script>标签，然后利用<script>的src 不受同源策略约束来跨域获取数据。

JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。

JSONP目前还是比较流行的跨域方式，虽然JSONP使用起来方便，但是也存在一些问题：首先， JSONP 是从其他域中加载代码执行。如果其他域不安全，很可能会在响应中夹带一些恶意代码，而此时除了完全放弃 JSONP 调用之外，没有办法追究。因此在使用不是你自己运维的 Web 服务时，一定得保证它安全可靠。

其次，要确定 JSONP 请求是否失败并不容易。虽然 html5 给<script>元素新增了一个 onerror事件处理程序，但目前还没有得到任何浏览器支持。为此，开发人员不得不使用计时器检测指定时间内是否接收到了响应。

来源：爱蒂网