devServer配置实现跨域

服务端

代码语言：javascript复制

const express = require('express');
let server = express();
server.listen(3000);
server.get('/api/user',(req,res,next)=>{
    res.send('aa');
})

客户端

代码语言：javascript复制

let xhr = new XMLHttpRequest();

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

xhr.onload=function(){
    console.log(xhr.response);
}

xhr.send();

此时客户端无法获取数据，客户端运行在8080端口而服务端运行在3000

这个时候我们可以通过webpack配置跨域 方法1

代码语言：javascript复制

 devServer:{
        proxy:{
            '/api':'http://localhost:3000'//配置代理
        }
                
    },
        
    plugins:[
        ...

当请求/api时会把请求代理到express服务器上 此时在进行请求正常返回数据

代码语言：javascript复制

aa

方法二

代码语言：javascript复制

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

第一种方式是服务端自动api前缀，第二中方法是服务端不带api前缀，而我们请求刚好有添加了api前缀，这个时候可通过上面配置实现在请求的时候将api前缀去掉

方法三 不使用代理来处理，在服务端中启动webpack，端口用服务端端口，端口一致就没有了跨域问题

cnpm i webpack-dev-middleware

代码语言：javascript复制

const express = require('express');
let server = express();
let webpack = require('webpack');
//中间件
let middleware = require('webpack-dev-middleware')

let config = require('./webpack.config.js');
let compiler = webpack(config);//编译后的结果
server.use(middleware(compiler))

server.listen(3000);
server.get('/api/user',(req,res,next)=>{
    res.send('aa');
})

此时访问http://localhost:3000/home.html也能正常打印数据

方法四 前端单纯模拟数据，不需要服务端

代码语言：javascript复制

devServer:{
    before(app){
            app.get('/user',(req,res)=>{
                    res.json({name:'hello'})
                })
        }
}

api webpack javascript 打包

0 人点赞