本文共 1445 字，大约阅读时间需要 4 分钟。

我们可能都会遇到一个这样的问题，当我们在本地启动项目时，域名是localhost:8000，而线上的接口是通过https://...的形式提供的。这种情况下，本地想要访问线上的接口，直接在本地调试可能会提示跨域问题。这个时候，我们可以配置nginx，作为反向代理，将本地的请求转发到线上的接口，从而避免跨域问题。

nginx配置

nginx是一个高性能的HTTP和反向代理服务器，也可以用来做负载均衡。通过配置nginx，我们可以将本地的请求反向代理到线上的接口，从而解决跨域问题。

语法规则

• location [=|~|~*|^~] /uri/ { ... }
  • = 表示精确匹配
  • ^~ 表示uri以某个常规字符串开头
  • ~ 表示区分大小写的正则匹配
  • ~* 表示不区分大小写的正则匹配
  • / 表示通用匹配

配置示例

server {    listen 80;    server_name manage.crm;    charset utf-8;    index /index.html;    add_header 'Access-Control-Allow-Origin' '*';    rewrite ^/ https://229492634.miss-xia-property-manage.club/;    location ^~ /fee/ {        proxy_pass https://229492634.miss-xia-property-manage.club;    }    location / {        proxy_pass http://localhost:8000;    }}

配置说明

• listen 80：监听80端口，通常用于HTTP服务。
• server_name manage.crm：指定服务器名称，访问域名会匹配到此配置。
• charset utf-8：指定字符集，确保正确显示字符。
• index /index.html：默认索引文件，访问根目录时自动返回index.html。
• add_header 'Access-Control-Allow-Origin' '*'：允许所有域名访问资源，解决跨域问题。
• rewrite ^/ https://229492634.miss-xia-property-manage.club/;：将根目录请求重定向到线上域名。
• location ^~ /fee/ { proxy_pass https://229492634.miss-xia-property-manage.club; }：如果请求路径以 /fee/ 开头，将其转发到线上服务器。
• location / { proxy_pass http://localhost:8000; }：所有未匹配的请求转发到本地项目地址。

测试配置

• 安装并启动nginx。
• 在浏览器中访问 http://manage.crm，检查是否能正常访问线上接口。
• 使用浏览器开发者工具检查是否有跨域错误，确保没有403 Forbidden或504 Gateway Time-out错误。

高级配置

• 如果有多个接口需要处理，可以在不同的location块中设置不同的proxy_pass地址。
• 配置不同的header信息，根据需求调整允许的域名。

通过以上配置，nginx可以作为反向代理，解决本地调试时的跨域问题，让我们能够更加便捷地调试和测试在线接口。

转载地址：http://becfk.baihongyu.com/