nginx反向代理解决跨域问题

nginx反向代理解决跨域问题

作为一个前端开发来说，肯定遇到过跨域的问题，尤其是使用前后端分离模式开的的项目，跨域问题肯定是避免不了的，接下来我将说下我了解到的解决跨域问题的方案以及利弊。

1、使用jsonp解决跨域问题
jsonp解决跨域对于前端人员来说应该是很熟悉的，百度下有很多详细的接收；我主要说下这样的成本，以这样的方案去解决需要后台进行配合，如果之前的项目就是以json形式返回数据的，要使用jsonp去解决，后端人员不一定对去专门为了某个接口或者某个需求就会修改原有封装的逻辑，但是如果一开始就是呀jsonp方式解决那就无可厚非。

2、window.name+iframe内嵌页面解决跨
因为iframe内嵌与script是同样原理，src访问不受安全机制的限制，能够访问跨域的接口地址；
首先说下实现方式：
ifram页面称作a，a要部署的位置要和服务端部署到一起，同时在我们的前端页面b（不和服务端部署在一起）中内嵌a页面，这样的情况下，a能够访问服务端的接口，同时b页面可以通过window.name的形式去访问自己的内嵌iframe页面a的数据。详细介绍请点击此处
弊端：这样做的话存在安全问题，iframe这样的形式对于服务端无疑就暴露了以一个访问的入口，对于接口的访问入侵者随意可以加入数据。

3、使用代理服务器
使用node去控制，前端自己就可以主导；nginx反向代理需要运维去配合部署了，但是这个过程也不难，前端人员可以在自己机器调试没有任何问题；再说说我们项目的解决方案吧，我们也算是自生自灭了，用c# 写了一个小后台做为一个中转服务去代理前端的请求，把所有的前端页面抛到这个代理服务中就可以解决任何跨域问题。

接下来是nginx解决跨域问题的各个步骤

---

• 下载安装链接地址

• 解压至c:\nginx，检查是否安装成功：通过命令行来启动，启动cmd,进入nginx文件下，输入nginx -v如出现如下图安装nginx版本号，说明安装成功！
  

• 启动nginx:可以直接双击nginx.exe进行启动，
  

  也可以通过命名 start nginx 进行启动；

  

• 查看是否启动成功
  在地址栏输入localhost:80进行访问，如果能正常出现如下图说明启动成功，
  

  如果并不能访问localhost:80，这时可以通过任务管理器看看是否有nginx.exe进程，如下图
  
  或者可以通过cmd输入命令
  tasklist /fi “imagename eq nginx.exe” 去查看是否有nginx进程
  

  如果经过查看有nginx进程，说明已经启动，但是localhost:80并不能访问成功，可以输入命令nginx -t进行调试，
  如出现下图，看看你的80端口是否被占用，如果被占用，可以去修改nginx->conf->nginx.conf文件的listen：80把80修改下；

  

  修改完成使用nginx -t命令进行检查，如果成功会出现test is successful。这时应该正常启动nginx。

---

启动成功后接下来就该使用nginx去配置解决跨域问题了

• 打开nginx.conf配置文件，修改localhost模块如下图解释所示
  

将前端已经写好的文件放在配置的root根文件下，访问的首页地址要对index进行配置。
跨域的服务配置：

表示将/microtax.service重新定向到http://192.168.36.84:8008/microtax.service;


location /microtax.service {        
    proxy_pass http://192.168.36.84:8008/microtax.service;
            }                   

这样配置完成后，在前端开发的时候访问接口时候只要通过如下ajax的url地址去访问接口，而不用直接通过ip+host的形式去访问了。

$.ajax({
    url:'/microtax.service/aaa/bbb.html',
    type:'get/post',
    success:function(){....}
})