您的位置:首页 > 健康 > 养生 > 宝安做网站的_宝鸡市今日头条新闻_外贸网站外链平台_企业网址怎么注册

宝安做网站的_宝鸡市今日头条新闻_外贸网站外链平台_企业网址怎么注册

2024/10/5 20:25:38 来源:https://blog.csdn.net/pan_junbiao/article/details/142383686  浏览:    关键词:宝安做网站的_宝鸡市今日头条新闻_外贸网站外链平台_企业网址怎么注册
宝安做网站的_宝鸡市今日头条新闻_外贸网站外链平台_企业网址怎么注册

1、解决跨域问题

如果 Vue 前端应用请求后端 API 服务器,出现跨域问题(CORS),如下图:

解决方法:在 Vue 项目中,打开 vue.config.js 配置文件,在配置文件中使用代理解决跨域问题。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,devServer:{proxy: 'http://localhost:8085',  //使用代理,解决跨域问题}
})

注意:配置代理完成后,请求的URL前面不需要再加上完整的域名了,示例如下:

function getUserInfo(userId) {//使用 axios 的 GET 请求axios({method: 'GET',//注意:因为配置了代理服务器(解决跨域问题),所以请求的URL前面不需要再加上完整的域名//url: `http://localhost:8085/user/getUserInfo/${userId}` //错误url: `/user/getUserInfo/${userId}` //正确}).then(function (response) {userInfo.value = response.data;}).catch(function (error) {alert("发生异常:" + error.message);});
}

最后重新启动项目就可以了。

2、配置说明

2.1 vue.config.js 配置文件

vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。

vue.config.js 官方文档:《vue.config.js 配置参考》

2.2 devServer.proxy 配置项 

 如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

devServer.proxy 可以是一个指向开发环境 API 服务器的字符串:

module.exports = {devServer: {proxy: 'http://localhost:4000'}
}

官方文档:《devServer.proxy 配置项》

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com