您的位置：首页 > Web前端

前端解决跨域的三种方式

2019-08-07 17:57 1031 查看

所谓跨域问题，主要因为浏览器的安全策略是同源策略，所谓同源是指域名，协议，端口完全相同，只有同源的地址才可以相互

请求。

如存在地址http://www.example.com/login.html，通过以下对比加深同源认识

1.jsonp方式

jsonp是一种借助于 script 标签发送跨域请求的方式。

[code]<script src="http://localhost:8080"></script>

由于上述方式无法传递参数，所以我们采用下面的方式进行跨域操作

[code]<body>
<button onclick="getData()">get</button>
<script>
function getData(){
let JSOP=document.createElement('script');
JSOP.src="http://localhost:8088?callback=fn";
document.body.append(JSOP);
}
//函数
function fn(data){
console.log(data);
}

</script>
</body>

服务器端代码如下

[code]app.get('/',function(req,res){
//前端的回调函数名函数名
let fn1=req.query.callback;
let data={username:'jack',pwd:'123'};
let result=`fn1('${JSON.stringify(data)}')`;
res.send(result);
});

2.CORS 跨域资源共享

只需要在被请求的服务端响应的时候添加一个 Access-Control-Allow-Origin 的响应头，表示这个资源是否允许指定域请求。

[code]// 允许远端访问
header('Access‐Control‐Allow‐Origin','*');

3.中转服务器

中转服务器是指当无法直接从前端获取到指定服务器地址的数据时，可以先访问自己的服务器，然后让自己的服务器去访问指定服务器地址的数据，这是因为后台服务器之间没有跨域问题。

在自己服务器书写如下代码

首先导入http协议

[code]let http=require("http");

写指定服务器地址，如

[code]let url="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=java&code=utf-8&json=1&p=3&req=2";

向指定服务器发送请求

[code]//向第三方服务器发起请求
function getInfoFromServer(url,fn){
let msg=[];
http.get(url,res=>{
//接收数据
res.on('data',chuck=>{
msg.push(chuck);
});
res.on('end',()=>{
fn(msg);
});
});
}

接下来进行数据的相关操作

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航