vue项目请求后台接口跨域

一时失言乱红尘 2023-06-28 08:50 15阅读 0赞

## 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，有的话，你的接口请求前缀就要加上‘/api’，(也可以在上面rewrite重写的时候重写成’/api’，你就不用手动加了)：

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

没有就不管了。  
如果你封装了公共请求js文件，（如果没有封装，请看[这篇博文][Link 1]）则在请求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，即可调试项目。

[Link 1]: https://blog.csdn.net/huanhuan03/article/details/103659986