nginx解决前端跨域访问

前言:博主最近接触了前后端分离的项目(之前做的都是前后端放一起的),然后在前端调用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的配置我这里只做了最简单的配置，希望对你能有所帮助。