nginx基础使用及代理跨域

nginx 根目录
brew info nginx

一,下载解压(无需安装)

路径不能出现中文
下载地址

二,修改配置文件

根目录>conf>nginx.conf
server{}里面为一个服务,默认80,访问index.html

server {
        listen       5000;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

三,常见命令

启动

start nginx

查看进程

tasklist /fi "imagename eq nginx.exe"

修改配置文件之后的重启

nginx -s reload

快速停止

nginx -s stop

有序停止

nginx -s quit

以上说的是作为容器部署项目,现在说说利用nginx跨域

如果后台因为种种原因不能开放CORS,而jsonp又只能解决get请求
在vue项目中,开发环境我们可以配置node代理跨域
打包之后部署nginx反向代理跨域…

一,用node在本地起一个服务(端口为3000)

在这里插入图片描述

二,写一个简单的ajax请求,部署在nginx中(端口为5000)

在这里插入图片描述

三,发起请求后出现跨域问题

因为客户端在5000端口,服务端在3000端口
在这里插入图片描述

四,配置代理(nginx.conf)

将本服务器的地址转发为后台的接口地址,即可解决跨域

 listen       5000;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }
          # 新加的
        location /api {
            proxy_pass   http://localhost:3000; # 后端接口 IP:port
        }

修改一下地址
在这里插入图片描述

五,前端跨域成功

在这里插入图片描述
看看代理之后的地址
在这里插入图片描述
还有很多种配置代理跨域的方法 个人认为这种比较简单

有想换工作的同学可以找我内推哦不低于15k(前端,java,测试)

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值