nginx解决前端跨域访问

前端开发 专栏收录该内容
2 篇文章 0 订阅

前言:博主最近接触了前后端分离的项目(之前做的都是前后端放一起的),然后在前端调用api接口上碰到了问题,因为浏览器的同源政策,所以前端调用api的时候会被浏览器拦截。
在这里插入图片描述这里所谓的跨域就是指两个页面的协议、域名、端口、子域名不同(如有错误,请指出)
为了解决该问题,博主度娘了好久(手动捂脸),总结了以下几种方法(主要讲nginx):

  1. 通过jsonp跨域
    需要服务器配合一个callback函数。
    任意门A:https://www.cnblogs.com/xiaoxiaoccaiya/p/7088176.html
  2. window.name+iframe
    任意门B:https://www.cnblogs.com/zhuzhenwei918/p/7403796.html
  3. window.location.hash+iframe
    需要目标服务器作处理
    任意门C:https://www.cnblogs.com/baiyeshuo/p/3344882.html
  4. CORS
    需要服务器设置header :Access-Control-Allow-Origin(需要考虑兼容性)
  5. 本文的主角:nginx

nginx是一个高性能的 Web和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器。
在高连接并发的情况下,Nginx是Apache服务器不错的替代品。

安装

官网下载地址:http://nginx.org/en/download.html
windows用户直接下载对应的版本即可

mac os x的安装:
首先我们要用到homebrew,在终端中输入
nginx -V //检查是否已经安装nginx
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" //下载nginx
brew install nginx //安装nginx

Linux的安装
由于太过复杂,博主就不讲了,可以参考这个:https://www.cnblogs.com/taiyonghai/p/6728707.html

配置(windows系统)

安装完成之后找到安装目录,打开conf文件夹中的nginx.conf文件
部分代码(不包含注释)

 server {
        listen       90;            //监听的端口,这里可以自己进行修改
        server_name  localhost;               //你的服务器IP地址(本机为localhost或127.0.0.1)
        location / {                               //所有以/开头的地址,实际上就是是所有请求
            root   html/business;            //到当前文件夹下寻找
            index  index.html;               //当前服务器首页相应地址
        }
		location /apis{                        //所有已apis请求开头的地址将apis映射为下面的url地址
			proxy_pass	http://48.96.102.81:8080/test;
		}
       
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    
    }    

注意:

  • url地址一定要写全,不然会报404错误
  • 监听的端口(listen)确定没被占用

运行nginx(windows系统)

不要直接点击nginx.exe(直接点击可能会运行不成功),找到window中的命令提示符(要以管理员身份运行,可以右键以管理员身份运行),不然会报错的。
切换到安装nginx的目录下,输入
start nginx //启动nginx
其他操作命令

nginx -s stop             //直接关闭服务
nginx -s quit             //会在处理完当前正在的请求后退出
nginx -s reload         //重启服务
nginx -t                    //检查配置文件是否有错

好了,以上就是使用nginx解决前端跨域访问的内容了。nginx的配置我这里只做了最简单的配置,希望对你能有所帮助。

  • 1
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值