配置Nginx解决跨域问题

Nginx 中将前端请求中的所有以 "/apiUrl" 开头的路径代理到 http://192.12.200.101:9813

例如:

/apiUrl/login ===> http://192.12.200.101:9813/login

配置nginx环境

  • 进入Nginx 的配置文件编辑界面:
python 复制代码
sudo nano /etc/nginx/conf.d/default.conf
  • 开始编辑 default.conf
bash 复制代码
server {
    listen       80;
    server_name  localhost;
    # 这里配置,配置如下
    location /apiUrl/ {
        rewrite ^/apiUrl(/.*)$ $1 break; # 路径重写
        proxy_pass http://192.12.200.101:9813; # 代理请求转发的目标地址
        add_header Access-Control-Allow-Origin *; # 表示允许任何域的请求访问资源。
        add_header Access-Control-Allow-Methods *;# 定义允许跨域请求的 HTTP 方法
        proxy_set_header Content-Type "application/x-www-form-urlencoded; charset=UTF-8"; # 设置代理请求时的 HTTP 请求头部信息。
     }

    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

纯净版:这里复制

bash 复制代码
location /apiUrl/ {
        rewrite ^/apiUrl(/.*)$ $1 break;
        proxy_pass http://192.12.200.101:9813;
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods *;
        proxy_set_header Content-Type "application/x-www-form-urlencoded; charset=UTF-8";
     }
  • 重启nginx
bash 复制代码
sudo service nginx restart

注意:

如果想/apiUrl/login ===> http://192.12.200.101:9813/apiUrl/login

这里路径匹配规则 /apiUrl/,如下图:

/apiUrl ----匹配到的路径----> /apiUrl,/apiUrl1,/apiUrl2

/apiUrl/ ----匹配到的路径--只有 /apiUrl

允许多个信任域名进行跨域访问,你可以在 Access-Control-Allow-Origin 头部中设置多个域名:
多个域名时:双引号或单引号内,使用逗号隔开;

bash 复制代码
add_header Access-Control-Allow-Origin "https://your-allowed-domain-1.com, https://your-allowed-domain-2.com, https://your-allowed-domain-3.com";

自定义允许跨域请求的 HTTP 方法:

bash 复制代码
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS, DELETE';

nginx官方文档--rewrite

相关推荐
路由侠内网穿透19 分钟前
本地部署 GPS 跟踪系统 Traccar 并实现外部访问
运维·服务器·网络·windows·tcp/ip
傻傻虎虎2 小时前
【Docker】常用帮忙、镜像、容器、其他命令合集(2)
运维·docker·容器
ZERO_pan3 小时前
服务器装机遇到的问题
运维·服务器
杀气丶3 小时前
Linux下运行芙蕾雅天堂2【俄文简译L2FATER】
运维·服务器·天堂2·l2fater·l2fater.cn
太空的旅行者4 小时前
告别双系统——WSL2+UBUNTU在WIN上畅游LINUX
linux·运维·ubuntu
九章云极AladdinEdu5 小时前
超参数自动化调优指南:Optuna vs. Ray Tune 对比评测
运维·人工智能·深度学习·ai·自动化·gpu算力
人工智能训练师6 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Tisfy8 小时前
服务器 - 从一台服务器切换至另一台服务器(损失数十条访客记录)
运维·服务器
qq_264220898 小时前
Nginx优化与 SSL/TLS配置
运维·nginx
Aspiresky10 小时前
浅析Linux进程信号处理机制:基本原理及应用
linux·运维·信号处理