如何解決跨域？常見解決方案淺析-Nginx-PHP中文網

首頁

運維

Nginx

如何解決跨域？常見解決方案淺析

青灯夜游

Apr 25, 2023 pm 07:57 PM

前端面試nginx

如何解決跨域？常見解決方案淺析

跨領域是開發中常會遇到的場景，也是面試中常會討論的問題。掌握常見的跨域解決方案及其背後的原理，不僅可以提高我們的開發效率，還能在面試中表現的更加游刃有餘。

因此今天就來跟大家從前端的角度來聊聊解決跨域常見的幾種方式。

什麼是跨域

在講跨域之前，我們先來看看URL的組成內容：

一個URL的組成，通常包含協定、主機名稱、連接埠號碼、路徑、查詢參數和錨點幾個部分。

這裡展示了一個URL的範例：

https://www.example.com:8080/path/resource.html?page=1&sort=desc#header

在上述範例中：
● 協定為HTTPS
● 主機名為www.example.com
● 端口編號為8080
● 路徑為/path/resource.html
● 查詢參數為page=1&sort=desc
● 錨點為header

##所謂跨域，指的是請求URL中協定、主機名稱、連接埠號碼中任一個部分不相同。

以上述URL為例，以下幾種寫法都算是和它跨域：

http://www.example.com:8080/    // 协议不同
https://www.example.a.com:8080/ // 主机名不同
https://www.example.com:8081/   // 端口号不同

為什麼會跨域

其實

跨域問題的出現是受限於瀏覽器的同源策略。

所謂的同源策略，其實是瀏覽器的安全機制，用來限制一個網頁中網路請求僅能夠存取來自相同來源（網域名稱、協定和連接埠號碼皆相同）的資源，主要目的是防止惡意網站透過腳本竊取其他網站的敏感數據，保障使用者的隱私和安全。

當瀏覽器端的腳本（js檔案）存取了其他網域的網路資源時，就會出現跨網域問題。

如何解決跨域

前文說到，跨域問題的出現是受限於瀏覽器的同源策略，那麼常見的解決跨域問題的方案，其實也是圍繞著瀏覽器展開的：

1.代理伺服器

在我們平常的開發中，

解決跨域問題最常使用的方案是使用代理伺服器。

代理伺服器解決跨網域問題其實是抓住了同源策略只受限於瀏覽器存取伺服器，對於伺服器存取伺服器並沒有限制的特點，作為中間伺服器做了一個請求轉送的功能。

具體來說，就是前端工程師編寫的網頁運行在由webpack等腳手架搭建的代理伺服器上，當前端網頁在瀏覽器中發起網絡請求時，其實這個請求是發送到代理伺服器上的，然後代理伺服器會將請求轉送給目標伺服器，再將目標伺服器回傳的回應轉送給客戶端。

代理伺服器在過程中扮演了一個中轉的角色，可以對請求和回應進行一些修改、過濾和攔截，以實現一些特定的功能。

因為前端網頁運行在代理伺服器上，所以不存在跨域問題。

那麼在線上環境和開發環境下，代理伺服器是如何做請求轉送的呢？

1.線上環境

在線上環境下，我們一般會採用

nginx來做反向代理，從而把前端的請求轉送到目標接口上。

nginx是一個輕量級高並發的web伺服器，基於事件驅動，而且跨平台，window和Linux都可以進行設定。

它作為代理伺服器來解決開發中的跨域問題的主要方法就是監聽線上前端網址的運行端口，然後碰到包含特殊標記的請求後就進行請求轉發。

2.開發環境

在開發環境下，無論是藉助於webpack還是使用vite或其他腳手架搭建的前端項目，解決跨域問題的核心是借助

http-proxy-middleware中間件實現的。而http-proxy-middleware中介軟體的核心又是對http-proxy的進一步封裝。

這裡先展示一下在專案中使用

http-proxy-middleware來實作請求轉送功能的範例程式碼：

const { createProxyMiddleware } = require(&#39;http-proxy-middleware&#39;);

module.exports = {
  server: {
    proxy: {
      // 将 /api/* 的请求代理到 http://localhost:3000/*
      &#39;/api&#39;: {
        target: &#39;http://localhost:3000&#39;,
        changeOrigin: true,
        pathRewrite: { &#39;^/api&#39;: &#39;/&#39; }
      }
    }
  }
};

接著

我們可以自己使用原生node，借助http-proxy庫來建立一個具有請求轉發功能的代理伺服器Demo，有興趣的朋友可以自己測試玩玩：

1. 首先需要建立一個空資料夾(全英命名)作為專案資料夾，然後使用npm init -y指令將專案升級為node的專案：

npm init -y

2. 接著在專案根目錄下建立一個index.html檔案用於發起跨域請求：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>请求转发测试</title>
</head>

<body>
    <h1 id="请求转发测试">请求转发测试</h1>
    <p id="message"></p>
    <script>
        fetch(&#39;/api/login&#39;)
            .then(response => response.text())
            .then(data => {
                document.getElementById(&#39;message&#39;).textContent = data;
            });
    </script>
</body>

</html>

3. 接著在專案根目錄下新建index .js檔案來寫服務端的程式碼。
index.js檔案是實作具有請求轉送功能的代理伺服器的核心檔案。

const http = require(&#39;http&#39;);
const httpProxy = require(&#39;http-proxy&#39;);
const fs = require(&#39;fs&#39;);
const path = require(&#39;path&#39;);

// 创建代理服务器实例
const proxy = httpProxy.createProxyServer({});

// 创建HTTP服务器
const server = http.createServer((req, res) => {
    if (req.url === &#39;/&#39; || req.url.endsWith(&#39;.html&#39;)) {
        // 读取HTML文件
        const filename = path.join(__dirname, &#39;index.html&#39;);
        fs.readFile(filename, &#39;utf8&#39;, (err, data) => {
            if (err) {
                res.writeHead(500);
                res.end(&#39;Error reading HTML file&#39;);
            } else {
                res.writeHead(200, { &#39;Content-Type&#39;: &#39;text/html&#39; });
                res.end(data);
            }
        });
    } else if (req.url.startsWith(&#39;/api&#39;)) {
        // 重写路径，替换跨域关键词
        req.url = req.url.replace(/^\/api/, &#39;&#39;);
        // 将请求转发至目标服务器
        proxy.web(req, res, {
            target: &#39;http://localhost:3000/&#39;,
            changeOrigin: true,
        });    
    }
});

// 监听端口
server.listen(8080, () => {
    console.log(&#39;Server started on port 8080&#39;);
});

4. 接著編寫目標伺服器target.js檔案的內容，用於測試跨網域存取：

const http = require(&#39;http&#39;);

const server = http.createServer((req, res) => {
    if (req.url.startsWith(&#39;/login&#39;)) {
        res.writeHead(200, { &#39;Content-Type&#39;: &#39;text/plain&#39; });
        res.end(&#39;我是localhost主机3000端口下的方法，恭喜你访问成功!&#39;);
    } else {
        res.writeHead(200, { &#39;Content-Type&#39;: &#39;text/plain&#39; });
        res.end(&#39;Hello, world!&#39;);
    }
});

server.listen(3000, () => {
    console.log(&#39;Target server is listening on port：3000&#39;);
})

5. 打开终端，输入启动目标服务器的命令：

node ./target.js //项目根目录下执行

6. 再开一个终端启动代理服务器，等待浏览器端发起请求就可以啦：

node ./index.js //项目根目录下执行

7. 最后在浏览器里访问http://localhost:8080, 打开控制台即可查看效果：

可以发现，浏览器network模块的网络请求确实是访问的8080端口的方法，但是我们的服务器默默的做了请求转发的功能，并将请求转发获取到的内容返回到了前端页面上。

其实http-proxy是对node内置库http的进一步封装，网络请求的核心部分还是使用http创建一个服务器对象去访问的。感兴趣的同学可以再读读http-proxy的源码~

除了代理服务器这种绕过浏览器同源策略的解决方式外，从前端的角度解决跨域问题还有如下一些常见的方法：

1.借助JSONP

JSONP的原理是通过动态创建<script>标签</script>，向服务器发送请求并在请求URL中传递一个回调函数名（通常是在本地定义的函数名），服务器在返回的数据中将这个回调函数名和实际数据一起封装成一个JavaScript函数的调用，返回给客户端，客户端利用该回调函数对数据进行处理。

JSONP之所以能够跨域请求数据，是因为浏览器对于<script>标签的请求不会受到同源策略的限制。</script>

需要注意的是，使用JSONP技术的前提是服务器需要支持JSONP的方式，即在返回的数据中包含回调函数名和实际数据的封装，否则客户端无法处理返回的数据。

此外，JSONP只支持GET请求，不支持POST等其他HTTP请求方式，因为<script>标签只支持GET请求。</script>

因此JSONP这种方式在我们的开发中使用的场景不多。

2.使用CORS

CORS全称为Cross-Origin Resource Sharing，它通过HTTP头部信息告诉浏览器哪些跨域请求是被允许的，从而实现安全的跨域访问。

CORS解决跨域需要浏览器端和服务器端的配合。原理是在服务器端设置HTTP头部信息，告诉浏览器允许哪些源（域名、协议、端口）访问服务器上的资源，如果请求的源不在允许的列表中，则浏览器将拒绝访
问。

服务器可以通过设置Access-Control-Allow-Origin、Access-Control-Allow-Headers、Access-Control-Allow-Methods等HTTP头部信息来控制跨域访问权限。

具体地，当浏览器发起跨域请求时，会先发送一个OPTIONS请求（预检请求），询问服务器是否允许该跨域请求。

服务器接收到该请求后，根据请求中的HTTP头部信息判断是否允许该请求。

如果允许，则返回相应的HTTP头部信息告知浏览器可以继续发送真正的跨域请求。如果不允许，则返回一个错误状态码，告诉浏览器该请求被拒绝。

预检请求时，请求头常见参数有：

请求头	值
Origin	表示请求的源地址，即发起跨域请求的域名
Access-Control-Request-Method	表示实际请求采用的HTTP方法
Access-Control-Request-Headers	表示实际请求中所携带的额外请求头信息，比如自定义请求头等

预检请求时，响应头常见参数有：

响应头	值
Access-Control-Allow-Origin	*、origin...
Access-Control-Allow-Headers	POST, GET, PUT, DELETE, OPTIONS
Access-Control-Allow-Methods	Content-Type, Authorization..
Access-Control-Allow-Credentials	true
Access-Control-Max-Age	86400

要注意的是，使用CORS的前提是伺服器需要設定相關的HTTP頭部訊息，且瀏覽器支援CORS。此外，CORS只支援現代瀏覽器，對於一些老舊的瀏覽器可能不支援CORS。

3.其他方案

例如WebSocket、postMessage等等

總結

近年來，隨著前後端技術的快速發展，前後端獨立開發逐漸成為主流的開發模式。前後端程式設計師只需約定好接口，然後獨自進行對應模組的開發，最後進行接口聯調即可。 在介面聯調過程中，開發環境下的跨域就是一個需要解決的問題。

除此之外，當前後端專案打包上雲後，前端頁面透過線上位址存取後台介面時，線上環境下的跨域也是一個需要解決的問題。

本文講述了幾個常見的跨域解決方案，這些方案各有優缺點，大家可以根據實際情況選擇適合的方案來解決對應的跨域問題~

#推薦教學：nginx教學

以上是如何解決跨域？常見解決方案淺析的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：掘金社区。如有侵權，請聯絡admin@php.cn刪除

NGINX：現代Web應用程序的多功能工具Apr 11, 2025 am 12:03 AM

NGINXisessentialformodernwebapplicationsduetoitsrolesasareverseproxy,loadbalancer,andwebserver,offeringhighperformanceandscalability.1)Itactsasareverseproxy,enhancingsecurityandperformancebycachingandloadbalancing.2)NGINXsupportsvariousloadbalancingm

NGINX SSL/TLS配置：使用HTTPS確保您的網站Apr 10, 2025 am 09:38 AM

通過Nginx配置SSL/TLS來確保網站安全，需要以下步驟：1.創建基本配置，指定SSL證書和私鑰；2.優化配置，啟用HTTP/2和OCSPStapling；3.調試常見錯誤，如證書路徑和加密套件問題；4.應用性能優化建議，如使用Let'sEncrypt和會話復用。

NGINX面試問題：ACE您的DevOps/System Admin面試Apr 09, 2025 am 12:14 AM

Nginx是高性能的HTTP和反向代理服務器，擅長處理高並發連接。 1）基本配置：監聽端口並提供靜態文件服務。 2）高級配置：實現反向代理和負載均衡。 3）調試技巧：檢查錯誤日誌和測試配置文件。 4）性能優化：啟用Gzip壓縮和調整緩存策略。

NGINX緩存技術：改善網站性能Apr 08, 2025 am 12:18 AM

Nginx缓存可以通过以下步骤显著提升网站性能：1)定义缓存区和设置缓存路径；2)配置缓存有效期；3)根据不同内容设置不同的缓存策略；4)优化缓存存储和负载均衡；5)监控和调试缓存效果。通过这些方法，Nginx缓存能减少后端服务器压力，提升响应速度和用户体验。

帶Docker的NGINX：部署和縮放容器化應用程序Apr 07, 2025 am 12:08 AM

使用DockerCompose可以簡化Nginx的部署和管理，通過DockerSwarm或Kubernetes進行擴展是常見的做法。 1）使用DockerCompose定義和運行Nginx容器，2）通過DockerSwarm或Kubernetes實現集群管理和自動擴展。

高級NGINX配置：掌握服務器塊和反向代理Apr 06, 2025 am 12:05 AM

Nginx的高級配置可以通過服務器塊和反向代理實現：1.服務器塊允許在一個實例中運行多個網站，每個塊獨立配置。 2.反向代理將請求轉發到後端服務器，實現負載均衡和緩存加速。

NGINX性能調整：針對速度和低潛伏期進行優化Apr 05, 2025 am 12:08 AM

Nginx性能調優可以通過調整worker進程數、連接池大小、啟用Gzip壓縮和HTTP/2協議、使用緩存和負載均衡來實現。 1.調整worker進程數和連接池大小：worker_processesauto;events{worker_connections1024;}。 2.啟用Gzip壓縮和HTTP/2協議：http{gzipon;server{listen443sslhttp2;}}。 3.使用緩存優化：http{proxy_cache_path/path/to/cachelevels=1:2k

NGINX安全性硬化：保護您的Web服務器免受攻擊Apr 04, 2025 am 12:06 AM

Nginx安全強化可以通過以下步驟實現：1)確保所有流量通過HTTPS傳輸，2)配置HTTP頭增強通信安全性，3)設置SSL/TLS加密數據傳輸，4)實施訪問控制和速率限制防範惡意流量，5)使用ngx_http_secure_link_module模塊防範SQL注入攻擊，這些措施能有效提升Nginx服務器的安全性。

See all articles