webpack学习记录(十)-跨域

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:'服务器启动'})
		})
	}
}