关于跨域请求

来源:转载

跨域问题的产生:

因为浏览器有同源策略,只有在同域名,同端口,同协议的情况下才可以进行数据交互;有的时候,例如:在公司开发项目的时候,前端开发的服务器可能和后端服务器不是同一个,因为可能是通过gulp、webpack搭建的开发服务器,就需要解决跨域问题,再例如,在大公司数据服务器不只有一个,所以跨域问题也必然存在

一、jsonp解决跨域请求

jsonp是一种前后端结合的跨域方式,原理就是通过script标签的src属性来进行数据请求,src不受同源策略的影响,故而能请求到数据,需要注意的是,数据处理需要通过回调函数来进行,而本质上,我们把回调函数的名字告诉后端,后端将数据放入到回调函数里,所以说需要告知后端,回调函数是什么,这也就是为什么说jsonp是前后端结合的方式。

注意:一个script只能请求一次,多次请求应该去动态的创建script,回调函数也只能使用一次,所以也需要动态创建 ,使用完成后移除,避免污染全局空间

缺点:jsonp只能get请求

1、nodejs代码,配置路由(使用express模块)

//后端的任务,就是把数据放到前端的那个函数里并给它执行一下

//直接返回这个操作的js字符串,因为这个字符串会被script当成js代码来运行

app.get('/data', function(req, res) {

//前端回调函数的名字         

let fn = req.query['callback'];

//注意,在content 后拼接一个空字符串,将获取的数据转义正常输出,否则有时候读取的数据格式为buffer数据类型   

var content = fs.readFileSync('./datas/data.json') + ''; 

//返回给前端函数数据           

res.send(fn + '(' + content + ')');

});

2、js代码,返回数据(函数中用到的是es6解构赋值参数)

Jsonp({         

url: "http://localhost:3000/data",

success(results) { 

console.log(results)

}

})

function Jsonp({ url, success }) {

//动态创建script标签        

let $script = $("")

//随机函数名字        

var random_name = 'random_fn_' + Date.now()

//创建的随机全局函数

window[random_name] = function(data) {

success(data)

//处理完数据之后,将script删掉,函数delete掉

$script.remove()

delete window[random_name] 

}     

$script[0].src = url + '?callback=' + random_name 

$("body").append($script)

}

二、cors解决跨域请求

cors纯后端的解决方式,每次请求都会有一个origin信息被后端捕捉,后端可以通过设置对这个origin的域允许访问来解决跨域问题

1、nodejs代码

app.get("/data_cors", (req, res) => {

//此次请求的源信息

var reqOrigin = req.header("origin");

//如果源信息存在,且源是运行访问的

if (reqOrigin != undefined && reqOrigin.indexOf("http://localhost:9000") > -1) {

//设置允许 http://localhost:3000 这个域响应         

res.header("Access-Control-Allow-Origin", "http://localhost:9000");

//允许这个域访问       

res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");

//允许的请求方法       

res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");       

}       

res.send('123')

})

2、js代码获取返回的数据

$.ajax({

      url:"http://localhost:3000/data_cors",

      success(results){

          console.log(results)

      }

})

三、服务端代理proxy解决跨域请求

因为服务器间的数据交互没有跨域限制,所以我们可以通过一个中间代理服务器来请求目标服务器的数据,也就是开发服务器发送请求到代理服务器,代理服务器再请求目标服务器,将数据返回给开发服务器

1、nodejs代码

//目标服务器接口 3000:

app.get("/data_proxy",(req,res)=>{

          //此次请求的源信息

          res.send('proxy')

})

2、代理服务器1234:

app.get("/to3000", (req, res) => {

//代理服务器1234对9000做跨域处理        

var reqOrigin = req.header("origin");

//如果源信息存在,且源是运行访问的        

if (reqOrigin != undefined && reqOrigin.indexOf("http://localhost:9000") > -1) {

//设置允许 http://localhost:3000 这个域响应          

res.header("Access-Control-Allow-Origin", "http://localhost:9000");

//允许这个域访问       

res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");

//允许的请求方法         

res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");

}     

//获取到9000真正要调用的3000目标服务器的接口

       

var url = req.query['url']

let _res = res

//代理服务器1234像目标服务器3000发送请求(没有跨域限制)

http.get(url, (res) => {

let result = ''

res.on("data", (chunk) => {              

result += chunk      

})

res.on("end", () => {

console.log(result)

//代理服务器1234将请求到的目标服务器3000的数据返回给开发服务器9000

_res.send(result) 

})     

})

})

app.listen(1234);

3、js代码,开发服务器9000:

//当前服务器9000向代理服务器1234发送请求

$.ajax({   

url: "http://localhost:1234/to3000",

data: {    

url: "http://localhost:3000/data_proxy"   

},

   success(results) {      

console.log(results)   

}

})

分享给朋友:
您可能感兴趣的文章:
随机阅读: