webpack学习记录-跨域

Posted 2021-03-04 arohaa

webpack学习记录(十)-跨域

准备工作

建一个简单的服务端

const express = require('express')

let app = express()

app.get('/api/user', (req,res) => {
    res.json({msg:'服务器启动'})
)
app.listen(3000)

发送一个请求

let xhr = new XMLHttpRequest()

xhr.open('get','/api/user',true)
xhr.onload = function () {
    console.log(xhr.response)
}
xhr.send()

这里就涉及到跨域问题了，用webpack-dev-server启动默认是8080端口，但是服务端监听的是3000端口。

解决办法如下。

方法一

请求到 /api/xxx 现在会被代理到请求 http://localhost:3000/xxx, 例如 /api/user 现在会被代理到请求 http://localhost:3000/user

devServer: {
    proxy: {
        '/api': {
            target: 'http://localhost:3000',
            pathRewrite: {'/api': ''}
        }
    }
}

方法二

安装中间件，在服务器中启动webpack

npm i webpack-dev-middleware -D

const express = require('express')
const webpack = require('webpack')
const middle = require('webpack-dev-middleware')
const config = require('./webpack.config.js')

let compiler = webpack(config)
let app = express()

app.use(middle(compiler))

app.get('/api/user', (req,res) => {
    res.json({msg:'服务器启动'})
)
app.listen(3000)

使用钩子函数模拟数据

devServer:{
    before(app){
        app.get('/user',(req,res) => {
            res.json({msg:'服务器启动'})
        })
    }
}