Nginx整合Tomcat實(shí)現(xiàn)跨域功能的完整指南

更新時(shí)間：2025年09月02日 09:41:37 作者：牛肉胡辣湯

在現(xiàn)代Web開發(fā)中,前后端分離架構(gòu)越來(lái)越普遍,這種情況下,跨域請(qǐng)求成為了一個(gè)常見(jiàn)的問(wèn)題,本文將介紹如何通過(guò)Nginx和Tomcat的整合來(lái)解決跨域問(wèn)題,并實(shí)現(xiàn)高效的服務(wù)部署

引言

在現(xiàn)代Web開發(fā)中，前后端分離架構(gòu)越來(lái)越普遍。后端服務(wù)通常運(yùn)行在不同的服務(wù)器上，而前端應(yīng)用則可能部署在另一個(gè)域名或端口下。這種情況下，跨域請(qǐng)求成為了一個(gè)常見(jiàn)的問(wèn)題。本文將介紹如何通過(guò)Nginx和Tomcat的整合來(lái)解決跨域問(wèn)題，并實(shí)現(xiàn)高效的服務(wù)部署。

環(huán)境準(zhǔn)備

軟件版本

Nginx: 1.21.3
Tomcat: 9.0.41
操作系統(tǒng): Ubuntu 20.04 LTS

安裝Nginx

sudo apt update
sudo apt install nginx

安裝Tomcat

sudo apt install default-jdk
cd /opt
sudo wget https://downloads.apache.org/tomcat/tomcat-9/v9.0.41/bin/apache-tomcat-9.0.41.tar.gz
sudo tar -xvzf apache-tomcat-9.0.41.tar.gz
sudo mv apache-tomcat-9.0.41 tomcat9
sudo chown -R www-data:www-data /opt/tomcat9

配置Tomcat

編輯??/opt/tomcat9/conf/server.xml??，添加或修改以下內(nèi)容：

<Connector port="8080" protocol="HTTP/1.1"
           connectionTimeout="20000"
           redirectPort="8443" />

啟動(dòng)Tomcat：

sudo /opt/tomcat9/bin/startup.sh

Nginx配置

基本配置

編輯Nginx配置文件??/etc/nginx/sites-available/default??，添加以下內(nèi)容：

server {
    listen 80;
    server_name your_domain.com;

    location / {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

跨域配置

為了處理跨域請(qǐng)求，可以在Nginx配置中添加CORS（Cross-Origin Resource Sharing）相關(guān)的頭信息。編輯上述配置文件，添加以下內(nèi)容：

server {
    listen 80;
    server_name your_domain.com;

    location / {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # CORS Headers
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    }

    # Handle preflight requests
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
    }
}

測(cè)試配置

保存配置文件并測(cè)試Nginx配置是否正確：

sudo nginx -t

如果配置正確，重啟Nginx以應(yīng)用更改：

sudo systemctl restart nginx

驗(yàn)證跨域功能

前端請(qǐng)求示例

假設(shè)前端應(yīng)用位于??http://your_frontend_domain.com??，可以通過(guò)以下JavaScript代碼驗(yàn)證跨域請(qǐng)求是否成功：

fetch('http://your_domain.com/api/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

后端響應(yīng)示例

確保Tomcat應(yīng)用能夠正確處理請(qǐng)求并返回?cái)?shù)據(jù)。例如，創(chuàng)建一個(gè)簡(jiǎn)單的Servlet：

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/api/data")
public class DataServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");

        PrintWriter out = response.getWriter();
        out.print("{\"message\": \"Hello, World!\"}");
        out.flush();
    }
}

通過(guò)上述步驟，我們成功地將Nginx與Tomcat整合，并實(shí)現(xiàn)了跨域功能。

方法補(bǔ)充

Nginx作為反向代理服務(wù)器，不僅提高了系統(tǒng)的性能和安全性，還簡(jiǎn)化了跨域請(qǐng)求的處理。Nginx 通常作為前端服務(wù)器使用，而 Tomcat 則用于運(yùn)行 Java 應(yīng)用。將 Nginx 與 Tomcat 整合可以提高應(yīng)用的性能和安全性，同時(shí)解決跨域問(wèn)題。下面是一個(gè)具體的例子，展示如何配置 Nginx 和 Tomcat，并實(shí)現(xiàn)跨域功能。

1. 安裝和配置 Tomcat

首先，確保你已經(jīng)安裝了 Tomcat 并且能夠正常運(yùn)行。假設(shè)你的 Tomcat 安裝在 ??/opt/tomcat?? 目錄下，并且應(yīng)用部署在 ??webapps/ROOT?? 目錄中。

2. 安裝和配置 Nginx

接下來(lái)，安裝 Nginx 并配置它以代理請(qǐng)求到 Tomcat。

安裝 Nginx

sudo apt update
sudo apt install nginx

配置 Nginx

編輯 Nginx 的配置文件，通常位于 ??/etc/nginx/nginx.conf?? 或 ??/etc/nginx/sites-available/default??。

server {
    listen 80;
    server_name your_domain.com;

    location / {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # 跨域配置
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }

        if ($request_method = 'POST') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        }

        if ($request_method = 'GET') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        }
    }
}

3. 重啟 Nginx 和 Tomcat

保存配置文件后，重啟 Nginx 和 Tomcat 以應(yīng)用更改。

sudo systemctl restart nginx
sudo systemctl restart tomcat

4. 測(cè)試跨域請(qǐng)求

你可以使用 Postman 或?yàn)g覽器的開發(fā)者工具來(lái)測(cè)試跨域請(qǐng)求。例如，發(fā)送一個(gè) OPTIONS 請(qǐng)求：

curl -X OPTIONS http://your_domain.com/api/endpoint -H "Origin: http://example.com" -I

你應(yīng)該會(huì)看到類似以下的響應(yīng)頭：

HTTP/1.1 204 No Content
Server: nginx/1.18.0 (Ubuntu)
Date: Wed, 21 Oct 2020 07:28:00 GMT
Connection: keep-alive
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type
Access-Control-Max-Age: 1728000
Content-Type: text/plain charset=UTF-8
Content-Length: 0

5. 安全性考慮

在生產(chǎn)環(huán)境中，建議不要使用通配符 ??*?? 來(lái)設(shè)置 ??Access-Control-Allow-Origin??，而是指定具體的域名。例如：

add_header 'Access-Control-Allow-Origin' 'http://example.com';

這樣可以避免潛在的安全風(fēng)險(xiǎn)。

在Web開發(fā)中，Nginx通常作為反向代理服務(wù)器使用，而Tomcat則用于運(yùn)行Java Web應(yīng)用。將Nginx與Tomcat整合可以提高應(yīng)用的性能和安全性，同時(shí)也可以通過(guò)配置解決跨域問(wèn)題。下面我將詳細(xì)介紹如何配置Nginx與Tomcat整合，并實(shí)現(xiàn)跨域功能。

1. Nginx與Tomcat整合

安裝Nginx和Tomcat

首先確保你已經(jīng)安裝了Nginx和Tomcat。這里假設(shè)你已經(jīng)安裝并配置好了這兩個(gè)服務(wù)。

配置Tomcat

Tomcat的默認(rèn)端口是8080。你可以通過(guò)編輯??server.xml??文件來(lái)更改端口號(hào)或其他設(shè)置。例如：

<Connector port="8080" protocol="HTTP/1.1"
           connectionTimeout="20000"
           redirectPort="8443" />

配置Nginx

編輯Nginx的配置文件（通常位于??/etc/nginx/nginx.conf??或??/etc/nginx/sites-available/default??），添加一個(gè)反向代理配置：

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

這個(gè)配置將所有來(lái)自??yourdomain.com??的請(qǐng)求轉(zhuǎn)發(fā)到本地的Tomcat服務(wù)器（??http://localhost:8080??）。

2. 實(shí)現(xiàn)跨域功能

跨域問(wèn)題通常發(fā)生在瀏覽器中，當(dāng)一個(gè)域名下的頁(yè)面嘗試訪問(wèn)另一個(gè)域名下的資源時(shí)。Nginx可以通過(guò)設(shè)置響應(yīng)頭來(lái)解決跨域問(wèn)題。

在Nginx中配置跨域

在Nginx配置文件中，添加跨域相關(guān)的響應(yīng)頭：

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # 跨域配置
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
        add_header 'Access-Control-Max-Age' 1728000;

        if ($request_method = 'OPTIONS') {
            return 204;
        }
    }
}

解釋：

??Access-Control-Allow-Origin??：允許所有來(lái)源訪問(wèn)，如果你只想允許特定的域名，可以將其替換為具體的域名，例如??http://example.com??。
??Access-Control-Allow-Methods??：允許的HTTP方法。
??Access-Control-Allow-Headers??：允許的HTTP頭部。
??Access-Control-Max-Age??：預(yù)檢請(qǐng)求的有效期，單位為秒。
??if ($request_method = 'OPTIONS') { return 204; }??：處理預(yù)檢請(qǐng)求（OPTIONS方法），返回204狀態(tài)碼表示成功。

3. 測(cè)試配置

保存配置文件后，重新加載Nginx以應(yīng)用新的配置：

sudo nginx -t  # 檢查配置文件是否有錯(cuò)誤
sudo systemctl reload nginx  # 重新加載Nginx

現(xiàn)在，你的Nginx應(yīng)該已經(jīng)成功與Tomcat整合，并且支持跨域請(qǐng)求。

4. 測(cè)試跨域請(qǐng)求

你可以使用Postman或?yàn)g覽器開發(fā)者工具來(lái)測(cè)試跨域請(qǐng)求是否正常工作。例如，發(fā)送一個(gè)帶有??Origin??頭部的請(qǐng)求：

curl -H "Origin: http://example.com" -X GET http://yourdomain.com/api

如果一切配置正確，你應(yīng)該能夠看到響應(yīng)頭中包含跨域相關(guān)的頭部信息。

到此這篇關(guān)于Nginx整合Tomcat實(shí)現(xiàn)跨域功能的完整指南的文章就介紹到這了,更多相關(guān)Nginx Tomcat實(shí)現(xiàn)跨域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: