Fork me on GitHub

解决跨域的几种方式

什么是跨域?

为什么会有这个问题?

因为浏览器同源策略:禁止跨不同源头访问资源。
仅限于ajax
*
跨域:从一个域名下的网页,向另一个域名下的服务端发送ajax请求—受服务器同源策略限制,禁止发送**

域名不同、子级域名不同、端口号不同、协议不同、同一台及其的域名和ip之间相互访问

这些都是会报错的!!

##例如这些##
http://www.a.com ->http://www.b.com
http://www.b.a.com -> http://www.c.a.com
http://localhost:5500 ->http://localhost:3300
http://localhost -> https://localhost
http://localhost -> http://127.0.0.1

都是会报错的 CORS…Access-Control-Allow-Origin

翻译过来就是 CORS-> Cross-Origin Resource Sharing 跨域资源共享
Access-Control-Allow-Origin 访问 控制 允许 来源;域


怎么解决呢?

1.CORS方式 即 跨域资源访问技术

是现在比较主流的解决方式,仅服务端改代码,就可跨域
这里再说一下同源策略的本质:其实可以发送ajax请求,也可以正常执行服务端的程序,也可以顺利返回正确的结果。
但是,浏览器经过检查数据的来源,发现和当前网页的来源不一致,所以,到手的数据不让用!
怎么办呢?其实就是在服务端返回响应的响应头中伪装成指定的源头


res.send(result)
res.send()是一种简写 等效于 res.writeHead()+res.write(JSON.stringify(result))+res.end

可以这样子写

1
2
3
4
5
res.writeHead(200,{
"Access-Control-Allow-Origin":"http://127.0.0.1:5500"
});
res.write(JSON.stringify(result));
res.end()

这样返回的数据,就被伪装成来自于127.0.0.1:5500的,就可以访问了。
也可以引入cors模块,例如

1
2
3
4
5
const cors=require('cors');
server.use(cors({
'credentials':true,
'origin':'http://localhost:8100'
}));

2.JSONP方式:JSON with padding 填充式JSON

jQuery对jsonp方式跨域进行了终极的简化:

1
2
3
4
5
6
7
8
9
$.ajax({
url:
type:
data:
dataType:"jsonp"
success:function(){
... ...
}
})

先写这么多吧,我比较熟练的就是cors了,写的比较简单,应该是简陋吧,只是我个人学习过程中的一点收获。
毕竟~~有google

坚持原创技术分享,您的支持将鼓励我继续创作!
------ 本文结束感谢您的阅读 ------