webpack跨域問題：解決webpack跨域的三種方式

解決webpack跨域的三種方式
1.使用代理
2.模擬數據
3.前端啓動到服務端上

webpack跨域問題

演示文件目錄展示：

創建server.js文件來開啓服務，模擬數據請求

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

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

app.listen(3000)

在src->index.js文件中發送請求：

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

這個時候，當我們npm run dev後，訪問http://localhost:8080/,出現錯誤：

我們應該請求的是http://localhost:3000/api/user，而不是http://localhost:8080/api/user;這裏產生了跨域問題；
那麼，如何配置webpack來解決呢？
配置：
在webpack.config.js中配置：

devServer:{
    proxy:{
        '/api':'http://localhost:3000'  // 配置了一個代理: 如何訪問的是/api開頭，就去http://localhost:3000這裏找
    }
},

這樣子就可以成功請求到http://localhost:3000/api/user的數據：

這裏有一個問題，不一定所有的接口都是以/api開頭的，按照上面的配置寫法，如果有其他開頭的接口請求，那我們還需要在下面配置不同開頭對應的代理地址；
這裏，我們可以這樣配置：

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

app.get('/user',(req,res)=>{
    res.json({name:'小白2'})
})
app.listen(3000)

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

webpack.config.js中配置：

devServer:{
    proxy:{  // 重寫的方式，把請求代理到express服務器上
        '/api':{
            target:'http://localhost:3000',
            pathRewrite:{'/api':''} // 把/api 替換爲空
        }
    }
},

如上配置，就可以將前端以/api開頭的請求代理到指定的服務端地址http://localhost:3000,並且會把請求地址的/api去除；

如果想直接在webpack裏模擬數據可以這樣配置：

devServer:{
    // 模擬數據
    before(app){
        app.get('/user',(req,res)=>{
            res.json({name:'小白'})
        })
    }
},

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

如果自己有服務端，不用代理來處理；

就可以在服務端中啓動webpack,端口用服務端端口
需要安裝webpack-dev-middleware：它可以讓我們在服務端啓動webpack

npm i webpack-dev-middleware -D

代碼：

// 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:'小白2'})
})
app.listen(3001)

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

運行效果：

總結：解決webpack跨域的三種方式

1. 使用代理：服務端是別人的，使用這個方式

devServer:{
    proxy:{  // 重寫的方式，把請求代理到express服務器上
        '/api':{
            target:'http://localhost:3000',
            pathRewrite:{'/api':''} // 把/api 替換爲空
        }
    }
},

2. 前端模擬數據

devServer:{
    // 模擬數據
    before(app){
        app.get('/user',(req,res)=>{
            res.json({name:'小白'})
        })
    }
},

3. 服務端是自己寫的，就可以把前端代碼啓動到服務端上

// 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:'小白2'})
})
app.listen(3001)