webpack proxy如何解決跨域?

一、是什么

webpack proxy，即webpack提供的代理服務(wù)

基本行為就是接收客戶端發(fā)送的請(qǐng)求后轉(zhuǎn)發(fā)給其他服務(wù)器

其目的是為了便于開發(fā)者在開發(fā)模式下解決跨域問題（瀏覽器安全策略限制）

想要實(shí)現(xiàn)代理首先需要一個(gè)中間服務(wù)器，webpack中提供服務(wù)器的工具為webpack-dev-server

webpack-dev-server

webpack-dev-server是 webpack 官方推出的一款開發(fā)工具，將自動(dòng)編譯和自動(dòng)刷新瀏覽器等一系列對(duì)開發(fā)友好的功能全部集成在了一起

目的是為了提高開發(fā)者日常的開發(fā)效率，只適用在開發(fā)階段

關(guān)于配置方面，在webpack配置對(duì)象屬性中通過devServer屬性提供，如下：

// ./webpack.config.js
const path = require('path')

module.exports = {
    // ...
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000,
        proxy: {
            '/api': {
                target: 'https://api.github.com'
            }
        }
        // ...
    }
}

devServetr里面proxy則是關(guān)于代理的配置，該屬性為對(duì)象的形式，對(duì)象中每一個(gè)屬性就是一個(gè)代理的規(guī)則匹配

屬性的名稱是需要被代理的請(qǐng)求路徑前綴，一般為了辨別都會(huì)設(shè)置前綴為 /api，值為對(duì)應(yīng)的代理匹配規(guī)則，對(duì)應(yīng)如下：

• target：表示的是代理到的目標(biāo)地址
• pathRewrite：默認(rèn)情況下，我們的 /api-hy 也會(huì)被寫入到URL中，如果希望刪除，可以使用pathRewrite
• secure：默認(rèn)情況下不接收轉(zhuǎn)發(fā)到https的服務(wù)器上，如果希望支持，可以設(shè)置為false
• changeOrigin：它表示是否更新代理后請(qǐng)求的 headers 中host地址

二、工作原理

proxy工作原理實(shí)質(zhì)上是利用http-proxy-middleware 這個(gè)http代理中間件，實(shí)現(xiàn)請(qǐng)求轉(zhuǎn)發(fā)給其他服務(wù)器

舉個(gè)例子：

在開發(fā)階段，本地地址為http://localhost:3000，該瀏覽器發(fā)送一個(gè)前綴帶有/api標(biāo)識(shí)的請(qǐng)求到服務(wù)端獲取數(shù)據(jù)，但響應(yīng)這個(gè)請(qǐng)求的服務(wù)器只是將請(qǐng)求轉(zhuǎn)發(fā)到另一臺(tái)服務(wù)器中

const express = require('express');
const proxy = require('http-proxy-middleware');

const app = express();

app.use('/api', proxy({target: 'http://www.example.org', changeOrigin: true}));
app.listen(3000);

// http://localhost:3000/api/foo/bar -> http://www.example.org/api/foo/bar

三、跨域

在開發(fā)階段， webpack-dev-server 會(huì)啟動(dòng)一個(gè)本地開發(fā)服務(wù)器，所以我們的應(yīng)用在開發(fā)階段是獨(dú)立運(yùn)行在 localhost 的一個(gè)端口上，而后端服務(wù)又是運(yùn)行在另外一個(gè)地址上

所以在開發(fā)階段中，由于瀏覽器同源策略的原因，當(dāng)本地訪問后端就會(huì)出現(xiàn)跨域請(qǐng)求的問題

通過設(shè)置webpack proxy實(shí)現(xiàn)代理請(qǐng)求后，相當(dāng)于瀏覽器與服務(wù)端中添加一個(gè)代理者

當(dāng)本地發(fā)送請(qǐng)求的時(shí)候，代理服務(wù)器響應(yīng)該請(qǐng)求，并將請(qǐng)求轉(zhuǎn)發(fā)到目標(biāo)服務(wù)器，目標(biāo)服務(wù)器響應(yīng)數(shù)據(jù)后再將數(shù)據(jù)返回給代理服務(wù)器，最終再由代理服務(wù)器將數(shù)據(jù)響應(yīng)給本地

在代理服務(wù)器傳遞數(shù)據(jù)給本地瀏覽器的過程中，兩者同源，并不存在跨域行為，這時(shí)候?yàn)g覽器就能正常接收數(shù)據(jù)

注意：服務(wù)器與服務(wù)器之間請(qǐng)求數(shù)據(jù)并不會(huì)存在跨域行為，跨域行為是瀏覽器安全策略限制

參考文獻(xiàn)

https://webpack.docschina.org/configuration/dev-server/#devserverproxy

使用webpack的proxy來解決跨域

使用webpack的proxy來解決跨域問題

什么是跨域

出于瀏覽器的同源策略限制。同源策略（Sameoriginpolicy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會(huì)受到影響?？梢哉fWeb是構(gòu)建在同源策略基礎(chǔ)之上的，瀏覽器只是針對(duì)同源策略的一種實(shí)現(xiàn)。同源策略會(huì)阻止一個(gè)域的。javascript腳本和另外一個(gè)域的內(nèi)容進(jìn)行交互。所謂同源（即指在同一個(gè)域）就是兩個(gè)頁(yè)面具有相同的協(xié)議（protocol），主機(jī)（host）和端口號(hào)（port）

解決思路

使用前端服務(wù)IP和端口來訪問后端接口地址，然后通過webpack的代理，訪問實(shí)際的接口地址。就是遵守瀏覽器的游戲規(guī)則。

注意點(diǎn)：

axios的base_url一定是自己本地的，可以不寫，默認(rèn)就是當(dāng)前服務(wù)地址。

target是后端的接口地址，也就是說我們?cè)趘ue.confjg.js里面的taget寫的是實(shí)際的請(qǐng)求地址。

可以使用webpack_proxy來解決跨域（主要說的是這里）

vue.config.js

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    devServer: {
        proxy: {
            "/api": {
                target: process.env.VUE_APP_BASE_URL, // todo 請(qǐng)注意，這里是后端的地址，這里不是本地的！?。?！
                ws: false, // websocket
                secure: false, // 是否支持https
                changeOrigin: true, // 是否跨域
            }
        }
    }
})

.env.development

env="development"
VUE_APP_BASE_URL = "http://localhost:8000"

Api.ts

/*
@description:
@auther: alex
@data: 12/23/22
*/
import axios, {AxiosResponse} from "axios";

// const instance = axios({
//     method: "post",
//     baseURL: "", // 因?yàn)橐獑⒂么?，所以所以這里可以不用寫，默認(rèn)為當(dāng)前服務(wù)的IP和端口
//     timeout: 10000,
// })

const instance = axios.create({
    method: "post",
    baseURL: "",
    timeout: 10000,
})
export const post = (url: string, params: any): Promise<AxiosResponse> => {
    return instance.post(url, params)
}

export const get = (url: string, params: any): Promise<AxiosResponse> => {
    return instance.get(url, params)
}

到此這篇關(guān)于webpack proxy如何解決跨域?的文章就介紹到這了,更多相關(guān)webpack proxy解決跨域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論