解决js跨域问题

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

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

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

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

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

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

这是后端代码，基于express

 1 const express = require(‘express‘);
 2
 3 const router = express.Router();
 4
 5 router.get(‘/‘, (req, res) => {
 6     if (req.query && req.query.callback) {
 7         res.jsonp({status: 200, message: "这是一个jsonp接口", data: [{name:111,age:222}]});
 8     } else {
 9         res.json({status: 200, message: "这是一个json接口", data: [{}]});
10     }
11 });
12
13 module.exports = router;

前端代码如下：

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

 1 function get_jsonp() {
 2 $.ajax({
 3     url: ‘/api‘,
 4     type: ‘get‘,
 5     dataType: ‘jsonp‘,  // 预期服务器返回的数据类型
 6     jsonp: ‘callback‘,  // 指定回调查询参数的名称，即前后端约定的字段，默认为“callback"
 7     jsonpCallback: ‘cb‘,  // 指定回调函数名称
 8     cache: true,
 9     success: function (data) {   // jQuery 将 JSON 数据剥离出来，传入 success 和 error
10         console.log(data);  // ‘This is JSONP realized by jQuery.‘
11         $("#jsonp").html(data.message);
12     }
13 });
14 }
15
16 function get_json() {
17 $.getJSON("/api", function (data) {
18     $("#json").html(‘json info:‘ + data.message);
19 })
20 }

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

1 function handleResponse(response) {
2     console.log(response);
3 }
4
5 var script = document.createElement(‘script‘);
6 // 指定回调函数的名字为 handleResponse
7 script.src = ‘/api?callback=handleResponse‘;
8 document.head.appendChild(script);

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