详解跨域处理

 服务器端：

/*-CREATE SERVER-*/
const express = require('express'),
    app = express();
app.listen(1001, () => console.log(`服务启动成功,正在监听1001端口!`));
 
app.get('/user/list', (req, res) => {
    // 获取传递进来的callback值，例如：'func'
    let { callback } = req.query;
    // 准备数据
    let result = {
        code: 0,
        data: ['张三', '李四']
    };
    // 返回给客户端指定的格式，例如：’函数名(数据)‘
    res.send(`${callback}(${JSON.stringify(result)})`);
});
 
/* STATIC WEB */
app.use(express.static('./'));

proxy 

/*-CREATE SERVER-*/
const express = require('express'),
    request = require('request'),
    app = express();
app.listen(1001, () => console.log(`服务启动成功,正在监听1001端口!`));
 
// 服务器接收到客户端发送过来的请求
app.get('/aaa', (req, res) => {
    // 向简书发送相同请求，从简书服务器获取想要的数据「不存在域的限制的」
    let jianURL = `https://www.jianshu.com/asimov/subscriptions/recommended_collections`;
    req.pipe(request(jianURL)).pipe(res);
});
 
/* STATIC WEB */
app.use(express.static('./'));

CORS

/*-CREATE SERVER-*/
const express = require('express'),
	app = express();
app.listen(1001, () => console.log(`服务启动成功,正在监听1001端口!`));
 
/*-MIDDLE WARE-*/
// 设置白名单
let safeList = ["http://127.0.0.1:5500", "http://127.0.0.1:3000", "http://127.0.0.1:8080", "http://127.0.0.1:5501"];
app.use((req, res, next) => {
	let origin = req.headers.origin || req.headers.referer || "";
	origin = origin.replace(/\/$/g, '');
	origin = !safeList.includes(origin) ? '' : origin;
	res.header("Access-Control-Allow-Origin", origin);
	res.header("Access-Control-Allow-Credentials", true);
	res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length,Authorization, Accept,X-Requested-With");
	res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS,HEAD");
	req.method === 'OPTIONS' ? res.send('OK') : next();
});
 
/*-API-*/
app.get('/list', (_, res) => {
	res.send({
		code: 0,
		message: 'zhufeng'
	});
});
 
/* STATIC WEB */
app.use(express.static('./'));

vue.config.js

webpack-dev-server

const ENV = process.env.NODE_ENV;
module.exports = {
    lintOnSave: ENV !== 'production',
    publicPath: './',
    productionSourceMap: false,
    // 对webpack-dev-server的配置
    devServer: {
        // 配置跨域代理「可以配置对多台服务器的代理」
        proxy: {
            // 所有以“/api”开始的请求，都发送到代理服务器「走这个配置」
            "/api": {
                target: "https://www.jianshu.com/asimov",
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    "^/api": ""
                }
            },
            // 所有以“/zhihu”开始的请求，都代理到知乎服务器
            "/zhihu": {
                target: "https://news-at.zhihu.com/api/4",
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    "^/zhihu": ""
                }
            }
        }
    }
};

部署到服务器上：基于nginx实现反向代理

处理原理

自己基于node实现

const request = require('request');

app.get('/subscriptions/recommended_collections', function (req, res) {

let url = 'https://www.jianshu.com/asimov' + req.url;

req.pipe(request(url)).pipe(res);

});

扩展：其他跨域方案「配合iframe」

• postMessage

• window.name

• document.domin

• location.hash

• ……

----------------------------------------