There are three ways to address webPack across domains

  1. Using the agent
  2. Simulated data
  3. The front end starts up on the server

Webpack cross domain issues

Demo file directory display:

server.js 

// server.js
let express = require('express');
let app = express();

app.get('/api/user',(req,res)=>{
    res.json({name:'white'})
})

app.listen(3000)
Copy the code

src
index.js 

// index.js
let xhr = new XMLHttpRequest();
xhr.open('GET'.'/api/user'.true);
xhr.onload = function() {
    console.log(xhr.response)
}
xhr.send()
Copy the code

NPM run dev = http://localhost:8080/

http://localhost:3000/api/user
http://localhost:8080/api/user

So how do you configure WebPack to do that?

Configuration:

Configure in webpack.config.js:

devServer:{
    proxy: {'/api':'http://localhost:3000'  // configure a proxy: how to access the/API start, go to http://localhost:3000}},Copy the code

This way you can request to the data of http://localhost:3000/api/user success:

/api

Here, we can configure it like this:

// server.js
let express = require('express');
let app = express();

app.get('/user',(req,res)=>{
    res.json({name:'the little white 2'})
})
app.listen(3000)
Copy the code
// index.js
let xhr = new XMLHttpRequest();
xhr.open('GET'.'/api/user'.true);
xhr.onload = function() {
    console.log(xhr.response)
}
xhr.send()
Copy the code

Webpack.config.js:

devServer:{
    proxy: {// Overwrite the request to the Express server
        '/api': {target:'http://localhost:3000'.pathRewrite: {'/api':' '} // Replace/API with null}}},Copy the code

With the above configuration, the front-end request starting with/API can be proxy to the specified server address http://localhost:3000, and the/API of the request address is removed.

If you want to simulate data directly in Webpack, you can configure it like this:

devServer:{
    // Simulate data
    before(app){
        app.get('/user',(req,res)=>{
            res.json({name:'white'}}}})),Copy the code
// index.js
let xhr = new XMLHttpRequest();
xhr.open('GET'.'/user'.true);
xhr.onload = function() {
    console.log(xhr.response)
}
xhr.send()
Copy the code

If you own a server, do not use the proxy to handle;

You can start WebPack on the server, using the server port

You need to install Webpack-dev-Middleware: it lets you start Webpack on the server

npm i webpack-dev-middleware -D
Copy the code

Code:

// 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);

app.use(middle(compiler))

app.get('/user',(req,res)=>{
    res.json({name:'the little white 2'})
})
app.listen(3001)
Copy the code
// index.js
let xhr = new XMLHttpRequest();
xhr.open('GET'.'/user'.true);
xhr.onload = function() {
    console.log(xhr.response)
}
xhr.send()

Copy the code

Operation effect:

Summary: There are three ways to resolve WebPack across domains

1. Use a proxy: The server belongs to someone else
devServer:{
    proxy: {// Overwrite the request to the Express server
        '/api': {target:'http://localhost:3000'.pathRewrite: {'/api':' '} // Replace/API with null}}},Copy the code
2. Front-end simulation data
devServer:{
    // Simulate data
    before(app){
        app.get('/user',(req,res)=>{
            res.json({name:'white'}}}})),Copy the code
3. The server side is written by itself, you can start the front-end code to the server side
// server.js
let express = require('express');
let app = express();
let webpack = require('webpack');

let middle = require('webpack-dev-middleware'); // Introduce this
let config = require('./webpack.config.js');    // Config file
let compiler = webpack(config);

app.use(middle(compiler))

app.get('/user',(req,res)=>{
    res.json({name:'the little white 2'})
})
app.listen(3001)
Copy the code