js跨域访问问题

时间: 2019-08-03阅读: 148标签: 跨域

什么是跨域访问

这里说的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)


JSONP

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

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

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

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


吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 网页游戏  直播/交友   H5游戏

链接: http://www.fly63.com/article/detial/4480

缓存竟也能导致跨域问题!

由于页面设计需要,页面展示图片,并可点击下载按钮进行下载(需要前端打包多个图片,所以需要使用ajax请求图片获得二进制内容,不能直接使用img或a进行下载),如图:

你应该了解的CORS

如果你和我一样,第一次遇到 CORS (跨域资源共享),你想让服务器接收那些你拼接的 Ajax 请求并处理他们。所以你去 stackoverflow.com 复制一段代码来设置一些 HTTP Headers ,让请求可以正常工作

reactjs中配置代理跨域

第一步,下载依赖 http-proxy-middleware;第二步,在src下建立setupProxy.js;第三步,在数据请求中直接请求,在真实url后添加/api即可,eg

nginx 反向代理处理跨域问题

正向代理是你发出请求的时候先经过代理服务器,所以实际上发出请求的是代理服务器。反向代理是“代理你的目标服务器”,请求目标服务器的代理,做一些处理后再真正请求。在这篇文章里,反向代理用于处理跨域问题。

vue项目打包后怎样优雅的解决跨域

在使用vue.js开发前端项目时,再结合webpack搞起各种依赖、各种插件进行开发,无疑给前端开发带来了很多便捷,就在解决跨域这个问题上,相信众多用vue.js的前端同僚们同我一样尝到了甜头

vue-cli3 中跨域解决方案

此方案只能用于开发环境,线上最好设置同源策略(遇到个后端,装你妈批),前后端不在同一服务器的情况下,前端要访问后端API,可通过在vue.config.js中配置代理服务器。

如何用Nginx解决前端跨域问题?

在开发静态页面时,类似Vue的应用,我们常会调用一些接口,这些接口极可能是跨域,然后浏览器就会报cross-origin问题不给调。最简单的解决方法,就是把浏览器设为忽略安全问题,设置--disable-web-security。

CORS跨域请求

浏览器的同源策略会导致跨域,这里同源策略又分为以下两种:DOM同源策略、XmlHttpRequest同源策略。只要协议、域名、端口有任何一个不同,都被当作是不同的域,之间的请求就是跨域操作。

JSONP技术栈_jsonp的使用

JSONP方案:前端提供 API 的方法,其实解耦还没有解的很干净,我们在设置script的src时直接给它传参,后端插入这个参数这就可以了。因为JSONP是通过动态创建Script实现的,动态创建Script只有GET请求没有POST请求

jsonp跨域原理,jsonp和ajax的区别?

Jsonp原理是动态创建一个script标签,利用script标签src属性访问没有限制,实现跨域。Ajax是页面无刷新请求数据操作,Jsonp不是真正的ajax请求。讲解Ajax 和 jsonp的区别,在jquery中使用jsonp

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全