vue项目请求后台接口跨域

proxyTable

vue项目在本地调试中，我们经常用localhost来启动，但是当你请求后台接口时，比如：http://xxx.kkkk.com/，则显示跨域，这里打开config下的index.js文件，dev下面有一个属性proxyTable，配置：

proxyTable: {
	 '/api': {
	     target: 'http://xxx.kkkk.com/',  // 接口域名
	     changeOrigin: true,  //是否跨域
		     pathRewrite: {
		         '^/api': ''   //需要rewrite重写成空字符串,
		     }              
	   }
 },

这样配置以后呢，你的接口请求前缀就要加上‘/api’，比如：

/room/num/          //  你本来请求的接口
/api/room/num/             // 你配置以后的请求接口

如果你封装了公共请求js文件，（如果没有封装，请看这篇博文）则在请求url前面拼接上/api即可：

var base = "/api"
// 发送请求
export function fetchPost (url, params) {
  return new Promise((resolve, reject) => {
    axios
      .post(base + url, params)
      .then(
        res => {
          resolve(res.data)
        },
        err => {
          reject(err.data)
        }
      )
      .catch(err => {
        reject(err.data)
      })
  })
}

这样在页面中请求接口写你原本接口即可，比如：

this.$fetchPost('/room/num', obj).then(res => {
 
 })

这样写是和打包上线没有关系的，仅仅是你在调试测试的时候。

nginx

这样跨域的问题就解决了，还有一种办法就是用nginx代理，配置本地监听的端口和域名的时候，写成localhost：

server {
    listen 9003;         // 随便写一个没被占用的
    server_name localhost;       //  项目打开地址(和后端协调一致)

	
 location /static/{
    rewrite ^/static/(.*)$ /$1 break;
    proxy_pass  http://192.168.1.51:8088;        // vue项目启动地址
   }
   
   location ~ .*\..*{
    proxy_pass   http://192.168.1.51:8088;        // vue项目启动地址
   }
   
   
	location /{
		proxy_pass  http://xxxxxx.aaa.dddd.cn;   // 后台请求接口地址
   }  
}

这样配置好，调试项目前，启动项目，启动nginx，然后在浏览器打开：localhost:9003，即可调试项目。