nginx解决前端跨域问题

跨域问题的出现

浏览器有一个同源安全策略，它限制了一个源(origin)中加载文本或者脚本与来自其他源(origin)中资源的交互方式，所谓的同源就是指协议、域名、端口相同。当浏览器执行一个脚本时会检查是否同源，只有同源的脚本才会执行，如果不同源即为跨域。

在开发静态页面时，我们常会调用一些接口，这些接口极可能是跨域，然后浏览器就会报cross-origin错误无法调用。

解决方法

跨域问题的解决方法有很多种，jsonp、nginx代理等。

这次主要使用nginx代理解决跨域问题。

举个栗子（假设）

假如我们在开发一个angular项目

 页面地址：http://www.forus616.cn:4200/
 接口地址：http://www.beauty.com/api/get/info

上面这种情况就会发生跨域问题，导致请求失败。

只要我们将接口地址修改为类似http://www.forus616.cn:4200/api/get/info，就可以解决跨域问题。

nginx代理步骤（假设你已经初步了解了nginx）

首先安装好了nginx，然后将配置文件修改一下：

 #在server中做如下修改
     server {
         listen       8081;   #这里是nginx监听端口
         server_name  http://www.forus616.cn;
         
         location / {
             proxy_pass http://www.forus616.cn:4200; 
             #这个是代理，说明这个代理服务器的默认路径/是 http://www.forus616.cn:4200
         }
         location /api {
             proxy_pass http://www.beauty.com/api;
             #这个是代理，说明这个代理服务器的路径/api是http://www.beauty.com/api
         }
    }
      

配置完成之后保存并重启配置。

项目中做的修改：

 页面地址修改为：http://www.forus616.cn:8081/
 接口地址修改为：http://www.forus616.cn:8081/api/get/info

这样就可以正常访问数据，不用担心跨域问题了。

不过这样做还有一点就是，会占用http://www.forus616.cn的8081端口，需要清楚。