vue调用公开接口出现跨域解决办法

vue调用公开接口出现跨域解决办法

    • 1、直接跨域请求代理

最近做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

你可能感兴趣的:(javascript)