webpack proxy如何解決跨域?

一、是什么

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

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

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

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

webpack-dev-server

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

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

關(guān)于配置方面，在webpack配置對象屬性中通過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)于代理的配置，該屬性為對象的形式，對象中每一個屬性就是一個代理的規(guī)則匹配

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

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

二、工作原理

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

舉個例子：

在開發(fā)階段，本地地址為http://localhost:3000，該瀏覽器發(fā)送一個前綴帶有/api標識的請求到服務(wù)端獲取數(shù)據(jù)，但響應(yīng)這個請求的服務(wù)器只是將請求轉(zhuǎn)發(fā)到另一臺服務(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 會啟動一個本地開發(fā)服務(wù)器，所以我們的應(yīng)用在開發(fā)階段是獨立運行在 localhost 的一個端口上，而后端服務(wù)又是運行在另外一個地址上

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

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

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

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

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

參考文獻

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

使用webpack的proxy來解決跨域

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

什么是跨域

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

解決思路

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

注意點：

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

target是后端的接口地址，也就是說我們在vue.confjg.js里面的taget寫的是實際的請求地址。

可以使用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 請注意，這里是后端的地址，這里不是本地的！?。?！
                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: "", // 因為要啟用代理，所以所以這里可以不用寫，默認為當前服務(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論