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接口。修改后的配置文件如下：
立即学习“前端免费学习笔记（深入）”；
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://:/;
}
}
请将/api/开头的请求都会被Nginx代理到指定的HTTP后端服务器。
这样，您的Vue前端项目就能在HTTPS环境下安全运行，同时也能顺利访问HTTP后端API接口，彻底解决跨域问题。
