Cross-domain is a scenario often encountered in development, and it is also a question often discussed in interviews. Mastering common cross-domain solutions and the principles behind them can not only improve our development efficiency, but also make us more comfortable in interviews.

SoLet’s talk to you today about several common ways to solve cross-domain problems from a front-end perspective.

What is cross-domain

Before talking about cross-domain, let’s first take a look at the components of a URL:

The contents of a URL Composition, usually contains protocol, host name, port number, path, query parameters and anchor parts.

An example of a URL is shown here:

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

In the above example:
● The protocol is HTTPS
● The hostname is www.example.com
● The port The number is 8080
● The path is /path/resource.html
● The query parameter is page=1&sort=desc
● The anchor point is header

The so-called cross-domain refers to It means that any part of the protocol, host name, and port number in the request URL is different.

Taking the above URL as an example, the following writing methods are considered to be cross-domain with it:

http://www.example.com:8080/    // 協(xié)議不同
https://www.example.a.com:8080/ // 主機名不同
https://www.example.com:8081/   // 端口號不同

Why is it cross-domain

In fact The occurrence of cross-domain problems is limited by the browser's same-origin policy.

The so-called same-origin policy is actually a security mechanism of the browser, which is used to restrict network requests in a web page to only access files from the same source (the domain name, protocol and port number are the same) resources, the main purpose is to prevent malicious websites from stealing sensitive data from other websites through scripts, and to protect user privacy and security.

When the browser-side script (js file) accesses network resources in other domains, cross-domain problems will occur.

How to solve cross-domain problems

As mentioned earlier, the occurrence of cross-domain problems is limited by the browser’s same-origin policy, so common solutions to cross-domain problems The solution actually revolves around the browser:

1. Proxy server

In our usual development, is most commonly used to solve cross-domain problems The solution is to use a proxy server.

Proxy serverTo solve the cross-domain problem, we actually grasp the feature that the same-origin policy is only limited to the browser accessing the server, and there is no restriction on the server accessing the server. As an intermediate The server has a request forwarding function.

Specifically, the web page written by the front-end engineer runs on a proxy server built by scaffolding such as webpack. When the front-end web page initiates a network request in the browser, the request is actually sent to the proxy server. , then the proxy server will forward the request to the target server, and then forward the response returned by the target server to the client.

The proxy server plays a relay role in this process and can modify, filter and intercept requests and responses to achieve some specific functions. Because the front-end web page runs on the proxy server, there is no cross-domain problem.

So how does the proxy server forward requests in the online environment and development environment?

1. Online environment

In the online environment, we generally use nginx as a reverse proxy to forward the front-end requests forwarded to the target interface.

nginx is a lightweight high-concurrency web server, event-driven, cross-platform, and can be configured on both window and Linux.

The main way it serves as a proxy server to solve cross-domain problems in development is to listen to the running port of the online front-end URL, and then forward the request after encountering a request containing a special tag .

2. Development environment

In the development environment, whether it is a front-end project built with the help of webpack or using vite or other scaffolding, the core of solving cross-domain problems is Implemented with the help of http-proxy-middleware middleware. The core of http-proxy-middleware middleware is a further encapsulation of http-proxy.

Here is a sample code that uses http-proxy-middleware to implement the request forwarding function in the project:

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = {
  server: {
    proxy: {
      // 將 /api/* 的請求代理到 http://localhost:3000/*
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: { '^/api': '/' }
      }
    }
  }
};

Then we can use native node, use the http-proxy library to build a proxy server Demo with request forwarding function. Interested friends can test and play by themselves:

1. First you need to create a Use the empty folder (named in English) as the project folder, and then use the npm init -y command to upgrade the project to a node project:

npm init -y

2. Next Create an index.html file in the project root directory to initiate cross-domain requests:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>請求轉(zhuǎn)發(fā)測試</title>
</head>

<body>
    <h1>請求轉(zhuǎn)發(fā)測試</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. Then create a new index in the project root directory .js file to write server-side code.
The index.js file is the core file for implementing a proxy server with request forwarding function.

const http = require('http');
const httpProxy = require('http-proxy');
const fs = require('fs');
const path = require('path');

// 創(chuàng)建代理服務(wù)器實例
const proxy = httpProxy.createProxyServer({});

// 創(chuàng)建HTTP服務(wù)器
const server = http.createServer((req, res) => {
    if (req.url === '/' || req.url.endsWith('.html')) {
        // 讀取HTML文件
        const filename = path.join(__dirname, 'index.html');
        fs.readFile(filename, 'utf8', (err, data) => {
            if (err) {
                res.writeHead(500);
                res.end('Error reading HTML file');
            } else {
                res.writeHead(200, { 'Content-Type': 'text/html' });
                res.end(data);
            }
        });
    } else if (req.url.startsWith('/api')) {
        // 重寫路徑，替換跨域關(guān)鍵詞
        req.url = req.url.replace(/^\/api/, '');
        // 將請求轉(zhuǎn)發(fā)至目標(biāo)服務(wù)器
        proxy.web(req, res, {
            target: 'http://localhost:3000/',
            changeOrigin: true,
        });    
    }
});

// 監(jiān)聽端口
server.listen(8080, () => {
    console.log('Server started on port 8080');
});

4. Then write the contents of the target servertarget.js file for testing cross-domain access:

const http = require('http');

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

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

5. 打開終端，輸入啟動目標(biāo)服務(wù)器的命令：

node ./target.js //項目根目錄下執(zhí)行

6. 再開一個終端啟動代理服務(wù)器，等待瀏覽器端發(fā)起請求就可以啦：

node ./index.js //項目根目錄下執(zhí)行

7. 最后在瀏覽器里訪問http://localhost:8080, 打開控制臺即可查看效果：

可以發(fā)現(xiàn)，瀏覽器network模塊的網(wǎng)絡(luò)請求確實是訪問的8080端口的方法，但是我們的服務(wù)器默默的做了請求轉(zhuǎn)發(fā)的功能，并將請求轉(zhuǎn)發(fā)獲取到的內(nèi)容返回到了前端頁面上。

其實http-proxy是對node內(nèi)置庫http的進一步封裝，網(wǎng)絡(luò)請求的核心部分還是使用http創(chuàng)建一個服務(wù)器對象去訪問的。感興趣的同學(xué)可以再讀讀http-proxy的源碼~

除了代理服務(wù)器這種繞過瀏覽器同源策略的解決方式外，從前端的角度解決跨域問題還有如下一些常見的方法：

1.借助JSONP

JSONP的原理是通過動態(tài)創(chuàng)建

Hot AI Tools

Undress AI Tool

Undress images for free

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Show More

Hot Article

Grass Wonder Build Guide | Uma Musume Pretty Derby

3 weeks ago By Jack chen

Roblox: 99 Nights In The Forest - All Badges And How To Unlock Them

3 weeks ago By DDD

Uma Musume Pretty Derby Banner Schedule (July 2025)

4 weeks ago By Jack chen

Today's Connections hint and answer 3rd July for 753

1 months ago By Jack chen

Windows Security is blank or not showing options

4 weeks ago By 下次還敢

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Laravel Tutorial

1597

29

PHP Tutorial

1488

72

nyt mini crossword answers

268

587

nyt connections hints and answers

132

836

Show More