js跨域访问问题

发布时间:2020-10-24 整理:编程之家
编程之家收集整理的这篇文章主要介绍了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",默认为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.....

 

服务器反向代理

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)

佛山vi设计https://www.houdianzi.com/fsvi/ 豌豆资源搜索大全https://55wd.com

JSONP

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

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

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

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

总结

以上是编程之家为你收集整理的js跨域访问问题全部内容,希望文章能够帮你解决js跨域访问问题所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478
编程之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!