跨域解决方案 - webpack devServer

1. 定义

如果一个项目中配置了webpack, 那么我们使用 webpack devServer 来配置代理转发请求来达到解决跨域问题的目的

webpack devServer 能够解决跨域问题的根本原因在于代理转发请求, 下面我们来介绍一下代理转发的流程

2. 代理转发

代理转发的过程如下图所示:

如上图所示, 转发代理的流程表述:

1. 浏览器加载完成, 当触发相关事件并请求数据时, 此时是向前端服务器请求, 这个过程并不发生跨域, 因为浏览器页面的index.html 保存于前端服务器, 并不会触发同源策略而产生跨域;
2. 前端服务器一般具有两个功能, 一是保存页面的HTML, 并将其发送给访问的用户; 二是作为代理, 转发用户发送过来的数据请求
3. 当前端服务器接收到用户的数据请求时, 先判断能够在本服务器处理, 如果不能, 此时将前端的请求处理, 然后从前端服务器发送一个请求到后端服务器, 此时特别注意: 同源策略4. 4. 是浏览器的限制, 服务器与服务器之间的请求是不受同源策略影响的, 因此不会跨域.
4. 后端接受到数据请求之后, 并向前端服务器发送响应
5. 前端服务器接收后端服务器的响应, 并将响应转发至访问用户
6. 用户接收到响应, 处理数据之后渲染页面

3. webpack devServer 解决跨域问题

express(app.js)

const express = require('express')

const log = console.log.bind(console)
const app = express()

// cors 模块用来解决跨域问题,只要声明了 cor，就说明该服务器允许跨域的访问
// const cors = require('cors')

// app.use(cors())

app.get('/helloworld', (request, response) => {
    log('触发了该事件')
    response.send('hello')
})

app.get('/singlecors', (request, response) => {
    response.set('Access-Control-Allow-Origin', '*')
    response.send('hello')
})

app.get('/api/todos', (request, response) => {
    response.send('request todos')
})

const main = () => {
    let server = app.listen(2300, () => {
        let host = server.address().address
        let port = server.address().port

        log(`应用实例，访问地址为 http://${host}:${port}`)
    })
}

if (require.main === module) {
    main()
}

webpack代码:

const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/a.js',
    output: {
        filename: "a_[chunkhash:8].js",
        path: path.resolve(__dirname, 'build')
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'devServer Demo',
            filename: 'index.html',
            template: path.resolve(__dirname, 'a.html')
        })
    ],
    devServer: {
        contentBase: path.resolve(__dirname, 'build'),
        open: true,
        proxy: {
            '/api': 'http://localhost:2300'
        }
    },
    mode: 'development',
    devtool: 'inline-source-map'
}

代码运行之后, 点击发送请求:

控制台的输出表明, 完成正常的通信, 并且接收到了后端的请求; 接下来我们看一下具体的请求头部信息:

我们发现, 浏览器是向http://127.0.0.1:8080/api/todos 发送的数据, 而我们后端的url 为:http://127.0.0.1:2300

以上就是webpack devServer 解决跨域问题的整个流程

4. 代码演示

1. github 地址:https://github.com/ouleWorld/studyDemo/tree/master/codeDevelopDemo/crossOrigin
2. 拉取整个项目, 然后将expressDemo/app.js 替换为上述app.js 文件
3. 运行expressDemo 后端模块
4. 运行devServer 项目(执行webpack-dev-server)

5. 参考链接

1. webpack
2. 项目地址