解决js跨域问题

前后端分离项目经常会遇到跨域问题，通常有两种方法去解决这个问题。

第一种，就是利用html5新的api跨源资源共享。

这时你可以让你的后端同事设置一个响应头如下，允许你直接请求资源，就OK了

Access-Control-Allow-Origin: http://www.xxx.net

红字部分就是你的前端域名，这样后端收到请求后，就会直接返回数据给你，这没什么好说的，直接看第二种。

 第二种，就是利用jsonp实现跨域。

这是后端代码，基于express

const express = require('express');

const router = express.Router();

router.get('/', (req, res) => {
    if (req.query && req.query.callback) {
        res.jsonp({status: 200, message: "这是一个jsonp接口", data: [{name:111,age:222}]});
    } else {
        res.json({status: 200, message: "这是一个json接口", data: [{}]});
    }
});

module.exports = router;

前端代码如下：

如果你的项目使用了jquery库，你可以直接使用他内置的ajax方法，里面封装好了跨域操作api，如下：

function get_jsonp() {
$.ajax({
    url: '/api',
    type: 'get',
    dataType: 'jsonp',  // 预期服务器返回的数据类型
    jsonp: 'callback',  // 指定回调查询参数的名称，即前后端约定的字段，默认为“callback"
    jsonpCallback: 'cb',  // 指定回调函数名称
    cache: true,
    success: function (data) {   // jQuery 将 JSON 数据剥离出来，传入 success 和 error
        console.log(data);  // 'This is JSONP realized by jQuery.'
        $("#jsonp").html(data.message);
    }
});
}

function get_json() {
$.getJSON("/api", function (data) {
    $("#json").html('json info:' + data.message);
})
}

如果你的项目没有使用类库框架，那么你可以使用如下方法（其实jquery就是基于这个原理）：

function handleResponse(response) {
    console.log(response);
}

var script = document.createElement('script');
// 指定回调函数的名字为 handleResponse
script.src = '/api?callback=handleResponse';
document.head.appendChild(script);

其实跨域还有其他办法，笔者这里只讲这两种方法，这是最简单最实用的两种方法。