佳宸学习和分享笔记的地方

0%

浏览器跨域问题

浏览器跨域问题

处于安全考虑 如果协议、域名或者端口有一个不同就是跨域,Ajax 请求会失败。

jsonp

利用<script>标签没有 跨域限制指向一个需要访问的地址并提供一个回调函数来接收数据。只限于 get 请求。

实现jsonp封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function jsonp(url, jsonpCallback, success) {
let script = document.createElement('script')
script.src = url
script.async = true
script.type = 'text/javascript'
// 约定一个callback字段名,来传递函数名,前端通过该函数来拿到数据
window[jsonpCallback] = function(data) {
success && success(data)
}
document.body.appendChild(script)
}

jsonp('http://xxx', 'callback', function(value) {
console.log(value)
})

cors

它允许浏览器向跨域服务器发出XMLHttpRequest请求,从而克服跨域问题,它需要浏览器和服务器的同时支持。

在服务端增加一些头部属性就行,客户端浏览器会自动添加origin字段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 引入http库
var http = require('http');

http.createServer(function (request, response) {

response.writeHead(200, {
// 字段
'Content-Type': 'text/plain',
// 允许请求的地址
'Access-Control-Allow-Origin': '*',
// 请求方法
'Access-Control-Allow-Methods': 'GET, POST, PUT'
});

response.end('request success!!!');
}).listen(8888);

console.log('Server running at http://127.0.0.1:8888/');