一、JSONP
<script src=""></script>
基本原理就是通过动态创建 script 标签，然后利用 src 属性进行跨域(后端用回调函数名称包裹数据进行返回即可)，但是要注意 JSONP 只支持 GET 请求，不支持 POST 请求:
// 回调函数
function showData (result) {
// json 对象转成字符串
$('#text').val(JSON.stringify(result));
}
$(document).ready(function () {
$('#btn').click(function () {
//向头部输入一个脚本，该脚本发起一个跨域请求
$('head').append('<script src="http://localhost:9090/student?callback=showData"><\/script>');
});
});
jQuery的JSONP请求
$(document).ready(function () {
$('#btn').click(function () {
$.ajax({
url: 'http://localhost:9090/student',
type: 'GET',
dataType: 'jsonp', // 指定服务器返回的数据类型
jsonpCallback: 'showData', // 也可以指定回调函数
success: function (data) {
// json对象转成字符串
$('#text').val(JSON.stringify(data));
}
});
});
});
二、CORS 跨域资源共享
利用 nginx 或者 php、java 等后端语言设置允许跨域请求:
header('Access-Control-Allow-Origin: *'); // 允许所有来源访问
header('Access-Control-Allow-Method: POST,GET'); // 允许访问的方式
三、服务器代理
浏览器有跨域限制，但是服务器不存在跨域问题，所以可以由服务器请求所要域的资源再返回给客户端。
Nodejs做代理(eggjs)
async demo() {
const { ctx: {inputs} } = this;
// 第三方接口地址
const url = 'http://api.map.baidu.com/location/ip';
// 获取第三方接口
const res = await this.ctx.curl(url, {
method: 'POST',
dataType: 'text',
data: inputs
});
// 返回数据
this.success({
data: res.data
});
}
四、Nginx 反向代理
在配置文件 nginx.conf 中添加以下配置：
location / {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
if ($request_method = 'OPTIONS') {
return 204;
}
}
