前端 - 使用 vue/cli-service 做代理转发的时候，遇到 403 如何解决？

Question

使用 vue/cli-service 做代理转发的时候，遇到 403 如何解决？

我有一个后端项目：http://crawler-console.xxx.xxx.cn/search_engine/list_all_sear...

使用 python 的 fastapi 写的，后端已经添加了跨域允许

app = FastAPI(title='爬虫模块接口', debug=False, docs_url=None,              redoc_url=None, version=api_version)app.add_middleware(    CORSMiddleware,    allow_origins=["*"],    allow_credentials=True,    allow_methods=["*"],    allow_headers=["*"],)

当我把上面的地址直接在 vue 中访问，是可以正常显示结果：

axios    .get(        "http://crawler-console.xxx.xxx.cn/search_engine/list_all_search_engine"    )    .then((response) => {        const data = response.data;        categories[0].data = data.website;        categories[1].data = data.image;        categories[2].data = data.image_search_engine;        categories[3].data = data.news;        categories[4].data = data.image_uri;        categories[5].data = data.novel;        categories[6].data = data.cyberlocker;        categories[7].data = data.poster_search;        categories[7].data = data.music;    })    .catch((error) => {        console.error(error);    });

相应头是:

HTTP/1.1 200 OKContent-Length: 84005Access-Control-Allow-Credentials: trueAccess-Control-Allow-Origin: *Connection: keep-aliveContent-Type: application/jsonDate: Thu, 07 Mar 2024 08:07:41 GMTKeep-Alive: timeout=4Proxy-Connection: keep-alive

但是如果我使用 cli-service 转发就会 403 报错

axios    .get(        "/api/search_engine/list_all_search_engine"    )    .then((response) => {        const data = response.data;        categories[0].data = data.website;        categories[1].data = data.image;        categories[2].data = data.image_search_engine;        categories[3].data = data.news;        categories[4].data = data.image_uri;        categories[5].data = data.novel;        categories[6].data = data.cyberlocker;        categories[7].data = data.poster_search;        // categories[8].data = data.music;    })    .catch((error) => {        console.error(error);    });

const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({  transpileDependencies: true,  devServer: {    proxy: {      "/api": {        // target: "http://192.168.31.245:6200/", // 代理目标的主机地址        // target: "http://127.0.0.1:6200/", // 代理目标的主机地址        target: "http://crawler-console.xxx.xxx.cn/", // 代理目标的主机地址        ws: true,        changeOrigin: true,        pathRewrite: {          "^/api": "", // 去掉 /api 前缀        },      },    },  },})

再请求就报错了

firefox 看到的响应头

HTTP/1.1 403 ForbiddenContent-Length: 146Connection: keep-aliveContent-Type: text/htmlDate: Thu, 07 Mar 2024 08:09:31 GMTKeep-Alive: timeout=4Proxy-Connection: keep-aliveVary: Accept-EncodingX-Powered-By: Express

此时的 wireshark 抓包请求

wireshark 抓包响应

---

模拟了下面的请求：

import requestsurl = "http://crawler-console.xxx.xxx.cn/search_engine/list_all_search_engine"headers = {    'x-forwarded-host': '192.168.168.103:8080',    'x-forwarded-proto': 'http',    'x-forwarded-port': '8080',    'x-forwarded-for': '192.168.168.103',    'referer': 'http://192.168.168.103:8080/search_engine_list',    'pragma': 'no-cache',    'connection': 'close',    'cache-control': 'no-cache',    'accept-language': 'zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2',    'accept-encoding': 'gzip, deflate',    'accept': 'application/json, text/plain, */*',    'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:123.0) Gecko/20100101 Firefox/123.0',    'host': 'crawler-console.mediawise.vobile.cn'}response = requests.get(url, headers=headers)print(response.text)

得到的响应是 403 ，但是删除 'x-forwarded-for': '192.168.168.103', 就是正常的，所以看起来好像是 x-forwarded-for 的问题

不懂，为什么？

架构是 vue 请求 k8s 的 ingress-nginx 再转发给我的 fastapi 后端

Answer 1

同事给我解决了

加个选项，xfwd: false

https://github.com/http-party/node-http-proxy