Nginx HTTPS和HTTP混合访问：如何解决Vue前端项目跨域问题？-php教程-PHP中文网

Nginx HTTPS和HTTP混合访问：如何解决Vue前端项目跨域问题？

心靈之曲

发布： 2025-02-21 15:30:06

原创

821人浏览过

nginx https和http混合访问：如何解决vue前端项目跨域问题？

Nginx配置HTTPS和HTTP混合访问，解决Vue跨域难题

在Vue项目使用HTTPS访问，而后台API接口采用HTTP的情况下，常常会遇到令人头疼的跨域问题。本文提供一个完善的Nginx配置方案，有效解决此类问题。

您提供的Nginx配置文件片段如下：

server {
    listen 443 ssl;
    server_name xxx.test.top;
    ssl_certificate /usr/local/nginx/cert/test1/test1.pem;
    ssl_certificate_key /usr/local/nginx/cert/test1/test1.key;
    ssl_session_cache shared:ssl:1m;
    ssl_session_timeout 5m;
    ssl_ciphers high:!anull:!md5;
    ssl_prefer_server_ciphers on;
    location / {
        root /usr/local/nginx/html/test;
        index index.html index.htm;
    }
}

server {
    listen 80;
    server_name xxx.test.top;
    rewrite ^(.*)$ https://${server_name}$1 permanent;
}

登录后复制

为了解决跨域问题，我们需要在Nginx配置文件中添加proxy_pass指令，将HTTPS请求代理到HTTP后端API接口。修改后的配置文件如下：

lavender.ai

销售类电子邮件写作教练

112

查看详情

立即学习“前端免费学习笔记（深入）”；

server {
    listen 443 ssl;
    server_name xxx.test.top;
    ssl_certificate /usr/local/nginx/cert/test1/test1.pem;
    ssl_certificate_key /usr/local/nginx/cert/test1/test1.key;
    ssl_session_cache shared:SSL:1m;
    ssl_session_timeout 5m;
    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers on;
    location / {
        root /usr/local/nginx/html/test;
        index index.html index.htm;
    }

    location /api/ {
        proxy_pass http://<backend_ip>:<backend_port>/;
    }
}

登录后复制

请将<backend_ip></backend_ip>和<backend_port></backend_port>替换为您的实际后端API接口IP地址和端口号。通过这个配置，所有以/api/开头的请求都会被Nginx代理到指定的HTTP后端服务器。

这样，您的Vue前端项目就能在HTTPS环境下安全运行，同时也能顺利访问HTTP后端API接口，彻底解决跨域问题。

以上就是Nginx HTTPS和HTTP混合访问：如何解决Vue前端项目跨域问题？的详细内容，更多请关注php中文网其它相关文章！