关于javascript:老生常谈之跨域

一、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 params = {        ...inputs,        token: '6f94a4917d57442c838f8476978ac475'    };    // 第三方接口地址    const url = 'http://api.map.baidu.com/location/ip';    // 获取第三方接口    const data = await this.ctx.curl(url, {        method: 'POST',        dataType: 'text',        timeout: 10000,        data: params    });    // 返回数据    this.success({        data: data.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;    }}

一、JSONP

二、CORS 跨域资源共享

三、服务器代理

四、Nginx 反向代理

更多文章