vue开发环境和生产环境的跨域，以及前端自己实现环境跨域

网上已有很多有关跨域的处理博客，再记录方便自己查看

开发环境跨域

1.配置代理
在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':''
	        }
        }
    }

2. 使用this.$http或者this.$axios的配置
使用axios或者http，两者都需要安装并配置全局（安装不说了）
http配main.js：

axios配main.js:

开始不太懂使用了http，后来才知道http已经不再维护。用axios喽
3.在需要的页面使用

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

4.在浏览器 network 中查看

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

后端处理 CORSFilter

 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代理

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'

使用：

至此结束。
有问题欢迎指出。阿里嘎多~