使用 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 OK
Content-Length: 84005
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Type: application/json
Date: Thu, 07 Mar 2024 08:07:41 GMT
Keep-Alive: timeout=4
Proxy-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 Forbidden
Content-Length: 146
Connection: keep-alive
Content-Type: text/html
Date: Thu, 07 Mar 2024 08:09:31 GMT
Keep-Alive: timeout=4
Proxy-Connection: keep-alive
Vary: Accept-Encoding
X-Powered-By: Express

此时的 wireshark 抓包请求

wireshark 抓包响应

---

模拟了下面的请求：

import requests

url = "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.pon.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