美文网首页
Nginx正向代理,解决跨域问题

Nginx正向代理,解决跨域问题

作者: 笙笙哥 | 来源:发表于2020-03-25 16:01 被阅读0次

PS: 解决客户端跨域问题,非服务器端配置

1. 安装

sudo brew install nginx

2. 启动

//方式一
sudo nginx  
//方式二
sudo brew services start nginx

解决跨域问题

原理:通过合并两个网站到同一个主机(通过路径区分主机),来避免跨域问题

找到配置文件

/usr/local/etc/nginx/nginx.conf

修改http下面的server节点


    server {
        listen       8090; //本地访问的端口
        server_name  localhost; //本地访问的地址

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {//服务器一,通过 http://localhost:8090/
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

            proxy_set_header X-real-ip $remote_addr;

            proxy_pass http://localhost:8080;
        }

        location /api/ { //服务器二,通过 http://localhost:8090/api/访问,api可以改成自定义路劲
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

            proxy_set_header X-real-ip $remote_addr;
            
            rewrite ^/api/(.*)$ /$1 break; 
            proxy_pass http://apptest.xxx.net;  
        }
}

重启 nginx

sudo nginx -s reload

说明

http://localhost:8090/  //服务器一
http://localhost:8090/api/  //服务器二,可用于程序里调用api的地址,一次类推多台服务器一样的配置

可能遇到的问题:
报错:
nginx: [alert] kill(2783, 1) failed (3: No such process)
原因:未启动,所以重新启动即可

解决:

sudo nginx 

nginx 常用命令

nginx -s reload 重新加载配置
nginx -s reopen 重启
nginx -s stop 停止
nginx -s quit 退出
nginx -V 查看版本,以及配置文件地址
nginx -v 查看版本
nginx -c filename 指定配置文件
nginx -h 帮助

相关文章

  • 跨域问题,解决方案

    跨域问题,解决方案 - Nginx反向代理跨域问题,解决方案 - CORS方案此为原作者的链接:跨域问题,解决之道

  • 用nginx的反向代理机制解决前端跨域问题

    用nginx的反向代理机制解决前端跨域问题 Vue做前台,后台走接口就会遇到跨域问题。这里Nginx做反向代理是一...

  • webpack设置代理出现的问题

    一、解决跨域问题有几种解决方案:跨域资源共享 CORSjsonpproxy (Nginx代理或其他的服务器代理)在...

  • Nginx正向代理,解决跨域问题

    PS: 解决客户端跨域问题,非服务器端配置 1. 安装 2. 启动 解决跨域问题 原理:通过合并两个网站到同一个...

  • vue cli 解决跨域 线上 nginx 反向代理配置

    vue cli 解决跨域 线上 nginx 反向代理配置 前后分离 axios 接 api 跨域问题如图: 解决办...

  • ajax跨域--nginx反向代理

    用nginx反向代理实现跨域,是最简单的跨域方式。只需要修改nginx的配置即可解决跨域问题,支持所有浏览器,支持...

  • nginx前端必备知识

    nginx在应用程序中的作用 解决跨域请求过滤配置gzip负载均衡静态资源服务器 正向代理与反向代理 代理是在服务...

  • 60.webpack中的proxyTable

    proxyTable是解决开发环境中的跨域问题,正式环境的跨域需要使用nginx反向代理或者是后端解决 '/api...

  • nginx 配置

    1、nginx访问配置 2、代理本地3000端口到3066端口 3、代理网络端口和本地端口到3066解决跨域问题 ...

  • Koa代理Http请求

    Koa 代理http请求,解决跨域问题 1、为什么用Koa做跨域代理? "最初为了解决跨域问题,我把站点部署到了n...

网友评论

      本文标题:Nginx正向代理,解决跨域问题

      本文链接:https://www.haomeiwen.com/subject/egqxuhtx.html