javascript|老生常谈之跨域 jsonp|nginx|node.js

一、JSONP

【javascript|老生常谈之跨域】基本原理就是通过动态创建 script 标签，然后利用 src 属性进行跨域(后端用回调函数名称包裹数据进行返回即可)，但是要注意 JSONP 只支持 GET 请求，不支持 POST 请求:

// 回调函数 function showData (result) { // json 对象转成字符串 $('#text').val(JSON.stringify(result)); } $(document).ready(function () { $('#btn').click(function () { //向头部输入一个脚本，该脚本发起一个跨域请求 $('head').append('<\/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; } }