解决 webpack 跨域的三种方式

所谓跨域就是协议、域名、端口 三者只要有一项不同就不可以访问，是浏览器的一种安全机制叫同源策略。该如何解决，常用的有三种方式，我们接着往下瞅。

# 前提准备

服务端代码

let express = require('express')

let app = express()

app.get('/api/getInfo', (req, res) => {
    res.json({ nmae: '张三', age: '18', info: '我是好学生' })
})

app.listen(9999, () => {
    console.log('服务启动成功: 9999')
})

前端请求代码

let xhr = new XMLHttpRequest();

xhr.open('GET', '/api/getInfo', true);

xhr.onload = () => {
    console.log(xhr.response)
}

xhr.send()

运行node server.js启动后端服务，nice ~~

# 方法一：proxy

这是一个比较常用的方法，利用前缀转发到目标地址来实现跨域

webpack.config.js

module.exprots = {
    devServer:{
        host: 'localhost', // 域名地址
        port: '8888', // 端口
        proxy: {
            '/api': {
                target: 'http://localhost:9999',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

# 方法二

如果是自己写的后端即node.js，我们也可以把前端的启动命令放在后端服务里，这里需要借助一个插件webpack-dev-middleware将前后端启动再一个端口里来解决跨域。

npm install webpack-dev-middleware -D

修改服务端代码，如下：

let express = require('express');
let webpack = require('webpack');
// 引入中间件
let middle = require('webpack-dev-middleware');
// 获得配置文件
let config = require('./webpack.config.js`);
// 利用 webpack 处理配置文件
let compiler = webpack(config);

let app = express();

//使用中间件
app.use(middle(compiler));

app.get('/api/getInfo', (req, res) => {
    res.json({ nmae: '张三', age: '18', info: '我是好学生' })
})

app.listen(9999, () => {
    console.log('服务启动成功: 9999')
})

这样前后端都启动在了localhost:9999下，是不是很神奇，没有利用代理就解决了跨域，nice ~~

# 方法三：before

假设没有后端服务，只是前端想模拟数据，怎么快速实现跨域呢？这时可以利用devServes里的另一个属性before来实现：

module.exports = {
    devServer:{
        before: function(app) {
            app.get('/getInfo', (req, res) => {
                res.json({ nmae: '张三', age: '18'})
            })
        }
    }
}

当然发送时也不需要加上api了，即如下：

xhr.open('GET', '/getInfo', true);

还可以用作配置mock数据，如下

before: require('./mock/mock-server.js')