webpack跨域问题记录

1.可以用webpack模拟数据

index.js

let xhr = new XMLHttpRequest();
// http://localhost:8081 webpack-dev-server的服务 -> 3000
xhr.open('GET', '/user', true);
xhr.onload = function(){
    console.log(xhr.response);
}
xhr.send();

webpack.config.js

devServer: { // 开发服务器的配置
   before(app){ //提供的方法 钩子 这里的app相当于server.js里的app
       app.get('/user', (req, res) => {
           res.json({name: '这里是模拟数据-before'})
       })
   }        
}

2.用server.js做后台服务器，用proxy代理在前端处理跨域

server.js文件

const express = require('express');
const app = express();
app.get('/user', (req, res) => {
    res.json({name: '这里是后台返回的数据'})
})
app.listen('3000', console.log('listen server 3000...'));

webpack.config.js

devServer: { // 开发服务器的配置        
   // 1）重写的方式，把请求代理到express服务器上
   proxy: { 
       '/api': {
           target: 'http://localhost:3000', // 配置了一个代理
           pathRewrite: {'/api': ''}
        }
    }
},

index.js

let xhr = new XMLHttpRequest();
// http://localhost:8081 webpack-dev-server的服务 -> 3000
xhr.open('GET', '/api/user', true);
xhr.onload = function(){
    console.log(xhr.response);
}
xhr.send();

3.有服务端，不想用代理来处理，能不能在服务端中启动webpack，端口用服务端端口，用中间件middleware，此时不需要设置webpack.config.js文件的devServer了

server.js

let express = require('express');
let app = express();
let webpack = require('webpack'); //内置
// 中间件
let middle = require('webpack-dev-middleware'); //下载依赖包
let config = require('./webpack.config.js');

let compiler = webpack(config); //用webpack处理
app.use(middle(compiler));

app.get('/user', (req, res) => {
    res.json({name: '这里是用中间件处理返回的数据'})
})

app.listen('3000', console.log('listen server 3000...'));

index.js

let xhr = new XMLHttpRequest();
// http://localhost:8081 webpack-dev-server的服务 -> 3000
xhr.open('GET', '/user', true);
xhr.onload = function(){
    console.log(xhr.response);
}
xhr.send();

返回的结果