vue直接访问外部接口设置代理，解决跨域（vue-cli3.0）

ゝ一纸荒年。 2022-10-17 10:58 614阅读 0赞

vue-cli3.0搭建的项目，平时访问内部接口配置了拦截器，今天需要调用天气预报的外部接口，发现跨域问题，通过配置代理解决。

1、在vue.config.js中配置代理

module.exports = {
      devServer: {
        proxy: { // 为天气接口配置代理，解决跨域
          '/proxy/': {
            'target': 'https://www.tianqiapi.com', //天气接口地址
            'secure': false, // false为http访问，true为https访问
            'changeOrigin': true, // 跨域访问设置，true代表跨域
            'pathRewrite': { // 路径改写规则
              '^/proxy': '' // 以/proxy/为开头的改写为''
            }
          }
        }
      }
    }

2、然后使用axios调用接口，检测到'/proxy'会替代为https://www.tianqiapi.com，这里实际访问到的接口就是https://www.tianqiapi.com/api，加上参数完整的就是：

https://www.tianqiapi.com/api/?version=v6&cityid=XXX&appid=XXX&appsecret=XXX

axios.get('/proxy/api', { // 这里会匹配到前面我们设置的/proxy，代替为https://www.tianqiapi.com
        params: {
            version: 'v6',
            cityid: XXX,
            appid: XXX,
            appsecret: 'XXX'
        }
    }).then(function (response) {
        console.log(response)
    }).catch(function (error) {
        console.log(error)
    })

3、可以访问了

![686c796c0fb8c54cc809a6265e864970.png][]

[686c796c0fb8c54cc809a6265e864970.png]: /images/20221014/5a3b7d5bbb134d80ae05e46d111f7fec.png

发表评论取消回复

表情：

评论列表（有 0 条评论，614人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue解决接口跨域

Vue解决接口跨域一、vue.config.js配置文件二、全局路径 -------------------- 一、vue.config.js配置文

╰半夏微凉°/ 2024年04月06日 15:26/ 0 赞/ 18 阅读

相关 webpack 设置跨域代理 vue设置代理

Webpack Dev Server 代理 API 我们的开发项目一般运行localhost：8080 但后端的接口部署在同源地址下，生产环境没问题，但是本地就不行了

刺骨的言语ヽ痛彻心扉/ 2022年12月26日 13:28/ 0 赞/ 217 阅读

相关 uni解决跨域，设置代理服务

uni 设置代理服务器，解决跨域问题 1、在mainfest.json中加入代码段注：“pathRewrite”:\{"^/dpc":""\} 不设置

末蓝、/ 2022年11月06日 12:51/ 0 赞/ 193 阅读

相关 vue直接访问外部接口设置代理，解决跨域（vue-cli3.0）

vue-cli3.0搭建的项目，平时访问内部接口配置了拦截器，今天需要调用天气预报的外部接口，发现跨域问题，通过配置代理解决。 1、在vue.config.js中配置代理

ゝ一纸荒年。/ 2022年10月17日 10:58/ 0 赞/ 615 阅读

相关 vuecli4中配置请求代理解决跨域

元气满满，直接干！开发项目时，给的测试接口需要跨域，这就非常难受！在vuecli中，可以通过配置请求代理，解决接口跨域问题。配置过程很简单。 1. 在根目录下添加 \

绝地灬酷狼/ 2022年09月02日 00:44/ 0 赞/ 223 阅读

相关 vue-cli本地环境API代理设置和解决跨域（包括cookie跨域的解决）

前言我们在使用vue-cli启动项目的时候`npm run dev`便可以启动我们的项目了，通常我们的请求地址是以localhost:8080来请求接口数据的，loca

蔚落/ 2022年05月13日 18:15/ 0 赞/ 190 阅读

相关 vue-cli本地环境API代理设置和解决跨域

前言我们在使用vue-cli启动项目的时候`npm run dev`便可以启动我们的项目了，通常我们的请求地址是以localhost:8080来请求接口数据的，loca

系统管理员/ 2022年05月09日 03:14/ 0 赞/ 228 阅读

相关 laravel接口访问跨域解决

原文：https://blog.csdn.net/cominglately/article/details/80381567 场景 . laravel作为后端API使用的

悠悠/ 2022年04月10日 07:39/ 0 赞/ 607 阅读

相关外部浏览器解决跨域

外部浏览器解决跨域项目的根目录中, 创建 vue.config.js // vue.config.js module.exports = {

清疚/ 2021年07月25日 18:32/ 0 赞/ 539 阅读

相关设置代理服务器解决跨域

因为服务器与服务器之间不存在跨域,所以通过设置本地服务器去访问目标服务器,然后本地服务器返回数据就不存在跨域。与src目录同级,设置vue.conf

川长思鸟来/ 2021年07月24日 18:40/ 0 赞/ 517 阅读