使用如下程式碼建立 HTTP 代理伺服器：

```javascript
const http = require('http');
const httpProxy = require('http-proxy');

const targetUrl = 'https://www.sap.cn/index.html';

const proxy = httpProxy.createProxyServer({
    target: targetUrl,
    secure:false
});

http.createServer(function (req, res) {
    proxy.web(req, res);
}).listen(8089);

console.log('Proxy listens in 8089');
```

瀏覽器輸入 http://localhost:8089/，遇到如下錯誤訊息：

> The requested URL "http://%5bNo%20Host%5d/index.html/", is invalid.

![](https://img-blog.csdnimg.cn/img_convert/3520aace4521457e3bba6c2c97b6c56f.png)

在 proxy 伺服器構造時，新增一行 `changeOrigin:true,` 後，錯誤消失：

![](https://img-blog.csdnimg.cn/img_convert/2556ef7ea24a0b2c6c079f3eb1b1a866.png)

![](https://img-blog.csdnimg.cn/img_convert/73f4315ebcf8a6718f3197003c4159e0.png)

這行程式碼的作用：

changeOrigin: true/false, Default: false - changes the origin of the host header to the target URL

意思是：置為 true，可以將 host header 的 origin 值，更改為目標 URL。

我們可以把 HTTP server 構造時指定的 target 欄位，設定到 proxy.web 方法裡，仍然工作：

![](https://img-blog.csdnimg.cn/img_convert/98b42d10b272c91a6ccd984679491e7f.png)

第 15 行 web 方法的第三個引數，接收一個欄位為 `target` 的 JSON 物件，值為期望跳轉到的目標 url.

同第一種方法不同，大家注意到，這種方法，我們在位址列裡輸入了 localhost:8089, 開啟被代理的百度網頁後，位址列裡的 localhost:8089 保持不變：

![](https://img-blog.csdnimg.cn/img_convert/8db80bdeaa26a7ea71449bb31244aa36.png)

```typescript
const http = require('http');
const httpProxy = require('http-proxy');

const targetUrl = 'https://www.sap.cn/index.html';

const baidu = 'https://www.baidu.com';

const proxy = httpProxy.createProxyServer({
    //target: targetUrl,
    changeOrigin:true,
    secure:false
});

http.createServer(function (req, res) {
    proxy.web(req, res, {
        target: baidu
    });
}).listen(8089);

console.log('Proxy listens in 8089');
```

但是對於 sap 官網來說，有一個重定向的行為：

![](https://img-blog.csdnimg.cn/img_convert/e076a89b4f2292217fde48314264610c.png)

![](https://img-blog.csdnimg.cn/img_convert/e78920846ae4269e1e1e914865ad7267.png)

> Access to fetch at 'https://wappass.baidu.com/static/captcha/tuxing.html?&logid=11334581951689513341&ak=c27bbc89afca0463650ac9bde68ebe06&backurl=https%3A%2F%2Fwww.baidu.com%2Fbaidu&signature=266d81f92ed0df604946084fd4d93f4c&timestamp=1661502581' (redirected from 'http://localhost:8085/baidu') from origin 'http://localhost:8085' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://wappass.baidu.com' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

正常情況下，使用 fetch 請求絕對路徑：

![](https://img-blog.csdnimg.cn/img_convert/dae8459bf5a6b9f8aeb1353749162bf2.png)

在 Chrome 開發者工具 network 標籤頁裡，沒有觀察到 OPTIONS 請求：
![](https://img-blog.csdnimg.cn/img_convert/a96815a1242582026a46d6b23bb4505d.png)

直接就是 HTTP GET CORS 錯誤了。當站點 A 嘗試從站點 B 獲取內容時，站點 B 可以傳送一個 Access-Control-Allow-Origin 響應標頭，告訴瀏覽器該頁面的內容可以從某些來源訪問。 源是一個域(domain)，加上一個方案(scheme)和埠號。

使用 http-proxy 代理 HTTP 請求時遇到的 the requested url is invalid 錯誤訊息

相關文章