欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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
vue调用公开接口出现跨域解决办法