解决本地vue项目访问服务器api（跨域访问）

2024-07-14 17:28| 来源: 网络整理| 查看: 265

错误：开发环境下的本地vue项目请求获取服务器上的api，服务器上的api不对外开放，只允许内部访问，报错出现跨域访问请求的错误在这里插入图片描述解决： 1、首先，在本地vue项目中的config/index.js中在proxyTable中添加服务器的地址；

proxyTable: {//开发环境下的跨域问题解决 '/api': { target: 'http://192.xxx.xxx.xxx:8080', //源地址 changeOrigin: true, //改变源 pathRewrite: { '^/api': 'http://192.xxx.xxx.xxx:8080' //路径重写 } } },

2、在服务器的nginx中，路径/ect/nginx，修改配置文件xxx.conf 注意：proxy_pass代理的是服务器接口的ip地址， http://localhost:8014是我服务器上的接口对应的端口在这里插入图片描述

location /api/ { proxy_pass http://localhost:8014/; add_header Access-Control-Allow-Origin *; }

然后，记得重启nginx； 3、post调取接口，刷新本地的页面调取api.js下的接口函数

userLogin(loginJson).then(response => { console.log(response)

api/index.js下调接口

/*登陆系统*/ export const userLogin = params => { return axios.post(`/api/auth/login`, params)};

在这里插入图片描述

【本文地址】

公司简介

联系我们