解决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);
其实跨域还有其他办法，笔者这里只讲这两种方法，这是最简单最实用的两种方法。
