Nginx配置HTTPS和跨域访问后端API时遇到问题怎么办？-php教程-PHP中文网

Nginx配置HTTPS和跨域访问后端API时遇到问题怎么办？

聖光之護

发布： 2025-02-20 22:00:22

原创

636人浏览过

nginx配置https和跨域访问后端api时遇到问题怎么办？

解决Nginx HTTPS配置下跨域访问后端API的问题

部署Vue前端项目到Nginx并启用HTTPS后，常常遇到跨域访问后端API接口失败的问题。本文提供Nginx配置文件的正确配置方法，解决此类问题。

在现有Nginx配置文件中，添加以下代码段，将请求代理到后端API接口：

<code class="nginx">location /api/ {
    proxy_pass http://backend_ip:backend_port;
}</code>

登录后复制

其中，backend_ip和backend_port需替换为您的后端API服务器的IP地址和端口号。 注意：使用Docker时，请使用容器内部IP地址。

问问小宇宙

问问小宇宙是小宇宙团队出品的播客AI检索工具

查看详情

为了允许跨域访问，还需要在Nginx配置文件中添加以下头部信息：

<code class="nginx">add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Headers' 'Content-Type';</code>

登录后复制

完整的Nginx配置文件示例如下：

<code class="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;
    }

    location /api/ {
        proxy_pass http://backend_ip:backend_port;
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Headers' 'Content-Type';
    }
}

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

登录后复制

完成以上配置后，重启Nginx服务，即可解决HTTPS环境下跨域访问后端API的问题。请确保后端API服务器正常运行并可访问。

以上就是Nginx配置HTTPS和跨域访问后端API时遇到问题怎么办？的详细内容，更多请关注php中文网其它相关文章！