vue开发环境和生产环境的跨域

前端在生产环境跨域

一，开发环境跨域

1.配置代理

如果使用vue-cli搭建的项目，可以直接使用proxyTable模块，项目框架已经集成
在config -> index.js 页面配置proxyTable，如下：

proxyTable: {
      '/api':{
            // 开发坏境下：target 里的地址是你跨域请求的地址
            target:'http://baidu.com',
            changeOrigin:true，
            pathRewrite:{
              '^/api':''  // 代表上面的地址，在别的页面用api代替
            }
        }，
        // 若是存在多个跨域问题，可代理多个
       '/bili':{
            target:'http://bilibili.com',
            changeOrigin:true,
            pathRewrite:{
              '^/bili':''
            }
        }
    }

显然，大部分情况我们不可能为每个api接口都在这加一个规则，所以更好的配置是：

proxyTable: {
    '**': {
        target: 'http://127.0.0.1:3000',
        changeOrigin: true,   //允许跨域
    }
}
或者
proxyTable: [{
    context: ['/**']，
    target: 'http://127.0.0.1:3000'，
    changeOrigin: true,  //允许跨域
}]

2. 使用this.axios的配置
使用axios需要安装并配置全局（安装不说了）

axios配main.js:

3.在需要的页面使用

// api 就是在config-index中代理的api，后面是具体的接口和参数 this.$axios.post(‘api/update’, { param: paramdata }).then(res => {...})

4.在浏览器 network 中查看

前面是本地项目的地址，后面跟的api就是代理地址，实现跨域

 

 

二，后端处理 CORSFilter

1.完全交予后端解决，配值请求头信息（core）

response.setHeader("Access-Control-Allow-Origin", "*");//* or origin as u prefer
 response.setHeader("Access-Control-Allow-Credentials", "true");
 response.setHeader("Access-Control-Allow-Methods", "PUT, POST, GET, OPTIONS, DELETE");
 response.setHeader("Access-Control-Max-Age", "3600");
 response.setHeader("Access-Control-Allow-Headers", "content-type, authorization");

若是后端可以处理的话，前端就可以放手“高枕无忧”了，开发环境生产环境都OK，具体使用后端小伙伴应该都懂，OK啦

 

三，生产环境跨域

配置nginx代理

使用nginx反向代理，在配置文件nginx.conf中找到server{}对象，更改项目地址root和配置代理地址proxy_pass，这个方法适合前端静态文件使用：

 

location / {
    root   D:/browseClient/dist;  #自己的前端项目地址
    index  index.html index.htm;
}
#解决跨域
location /api {                                # 自定义nginx接口前缀
    proxy_pass   http://127.0.0.1:3000;            # 后台api接口地址
            proxy_redirect default;      
    #设置主机头和客户端真实地址，以便服务器获取客户端真实IP
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;   
}

 

location是线上地址。
api是 我们前端代理的 那个api。
proxy_pass 后面就是跨域地址
我在网上找到很多配置很全的nginx.config,有疑问还可以搜搜。

 

 

四，前端用原生ajax处理跨域

不用后端了！！！
代码如下，公用部分：

export function httpRequest(paramObj, fun, errFun) {
  var xmlhttp = null
  /* 创建XMLHttpRequest对象，
     *老版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 对象：new ActiveXObject("Microsoft.XMLHTTP")
     * */
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest()
  } else if (window.ActiveXObject) {
    xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')
  }
  /* 判断是否支持请求*/
  if (xmlhttp == null) {
    alert('你的浏览器不支持XMLHttp')
    return
  }
  /* 请求方式，并且转换为大写*/
  var httpType = (paramObj.type || 'GET').toUpperCase()
  /* 数据类型*/
  // var dataType = paramObj.dataType || 'json'
  /* 请求接口*/
  var httpUrl = paramObj.httpUrl || ''
  /* 是否异步请求*/
  var async = paramObj.async || true
  /* 请求参数--post请求参数格式为：foo=bar&lorem=ipsum*/
  var paramData = paramObj.data || []
  var requestData = ''
  for (var name in paramData) {
    requestData += name + '=' + paramData[name] + '&'
  }
  requestData = requestData === '' ? '' : requestData.substring(0, requestData.length - 1)
  console.log(requestData)

  /* 请求接收*/
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
      /* 成功回调函数*/
      fun(xmlhttp.responseText)
    } else {
    /* 失败回调函数*/
      errFun
    }
  }

  /* 接口连接，先判断连接类型是post还是get*/
  if (httpType === 'GET') {
    xmlhttp.open('GET', httpUrl, async)
    xmlhttp.send(null)
  } else if (httpType === 'POST') {
    xmlhttp.open('POST', httpUrl, async)
    // 发送合适的请求头信息
    xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
    xmlhttp.send(requestData)
  }
}

 

在需要处理的页面引入这个公共方法：

import { httpRequest } from '@/utils/index'

使用：