vue调用公开接口出现跨域解决办法
程序员文章站
2022-07-10 10:19:16
...
vue调用公开接口出现跨域解决办法
最近做vue项目心血来潮,想做一个自己的个人网站,其中就有调用一些网上的免费接口,但是总是出现跨域的问题,尝试过部署到阿里云服务器也不行。直到试了下跨域请求代理,就可以了。不多说,看下图。
1、直接跨域请求代理
打开vue项目结构下的config/index.js,增加proxyTable内容:
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'https://ebb.io/_', //源接口地址,network请求地址中api前面的部分
changeOrigin: true, //改变源
pathRewrite: {
'^/api': ''
//这里可以理解成用‘/api’代替target里面的地址
}
}
},
}
这样设置代理后后面发起http请求时,调用接口时就可以直接用/api代替源地址。举个例子,我要调用’https://ebb.io/_/user/add’,直接写‘/api/user/add’即可,这样避免了跨域。
最后分享下一个github上开源的动漫网站,网站风格很nice啊,希望可以帮助到自己想搭建个人网站的小伙伴。
github: https://github.com/ebb-io/ebbx