项目实战跨域之配置nginx反向代理（基于开发环境和生产环境分析后端分别运行在本地和服务端的状况）

问题描述：

  前端后台项目都在本地运行，考虑到端口不一样，在前端配置了代理以下，可以实现跨域请求，正常获取数据。但当我把后台项目都迁移到服务器运行时，前台却老是获取不到数据。

  最近在VUE项目中遇到Ajax异步请求的跨域问题，以前也有系统地学习过跨域问题，网上关于跨域的解决方案整理有不少，我就再也不赘述，只在本次实战中提供我的经验。

  我选择了传说中最简单的跨域解决方案---nginx反向代，那么根据先后端项目都运行在本地（前端开发环境）、后端运行在服务器、前端项目分别运行在本地（前端开发环境）或者服务端进行如下三种状况来考虑。

 

问题解决：

1、先后端项目都运行在本地，前端为开发环境

   咱们都知道，前端运行环境分为开发环境和生产环境，运行在本地时，我启用的是开发环境。

  一开始，前端后台项目都在本地运行，若是前端项目经过异步请求获取后端数据会报错以下：

  很明显，出现了跨域问题，因为跨域资源共享机制，没有设置 Access-Control-Allow-Origin 所以组织了跨域请求返回的资源（咱们应当明白，跨域问题中浏览器发送了请求，可是拒绝了不一样源服务器返回的资源）。

  而咱们这里是由于端口不一样产生了跨域，前端代理配置以下，实现了跨域请求。

 

// vue.config.js
proxy: {
    '/api': { // 匹配全部以 '/api'开头的请求路径
    target: 'http://localhost:4000', // 代理目标的基础路径
    changeOrigin: true, // 支持跨域
    pathRewrite: { // 重写路径: 去掉路径中开头的'/api'
       '^/api': ''
    }
}

 

  那么第一种状况下，先后端都运行在本地，前端在开发环境下便可简单地实现跨域请求。

 

2、 后端运行在服务器，前端项目运行在本地（开发环境下）

  当后台项目部署到服务器上之后，更改前端项目中的请求地址和接口，用postman测试，能够正常获取数据，证实后端在服务器正常运行。但运行在本地的前端项目却获取不到数据，报错以下：

  后来经验证，后台跨域配置注释掉，仍能够正常获取异步请求返回的数据，因而我猜想这应该是由于前台项目由于时效缘由没有当即请求到刚刚部署在服务器的后台项目，但为何postman测试接口请求数据没有问题，我也不能准确地解释缘由，但能够确定的是：开发环境下，后端不须要多余的配置便可实现跨域，这是由于vue-cli建立的项目在生产环境中直接利用node.js代理服务器，经过修改 proxy 接口实现跨域请求。

 

 3、先后端项目都运行在服务器上

    当把前台也部署在服务器之后，就没法正常获取异步请求的后端服务器上的资源了，会产生以下报错。

    这时候只须要配置服务器上的nginx反向代理，便可实现跨域请求。而此时，第一种状况下，前台的配置也能够省去了，由于第一种状况下的跨域是基于开发环境下对前端配置，即由于vue-cli建立的项目在生产环境中直接利用node.js代理服务器，经过修改 proxy 接口实现跨域请求。而在生产环境下，仅需对后端进行跨域配置，我在项目实战中将前台配置所有注释掉，仅配置后端，异步请求数据可以正常获取资源。

 

 

  后端跨域配置以下：

// nginx.conf
server{
     listen 80; // 前台项目端口号
     server_name 140.143.133.253; // 前台项目ip或域名
     index index.html index.htm index.php;
     root  /www/wwwroot/lynn_z.com/dist; // 前台项目根目录
        
     location /api {
          proxy_pass http://140.143.133.253:4000; // 后端域名或IP
          rewrite ^/api/(.*)$ /$1 break; // 重写URL
          proxy_cookie_domain 140.143.133.253:4000 140.143.133.253:81; // 修改cookie中域名
          add_header Access-Control-Allow-Origin 140.143.133.253:80;
          add_header Access-Control-Allow-Credentials true;

     }
}