vue 跨域配置

梦里梦外; 2021-08-26 19:49 379阅读 0赞

1.需求 vue项目中 有时候会遇到外源的地址 域名或端口 不一致 就会 跨域

配置.在vue.config.js(有的不是这个文件) 中 配置 webpack-dev-server(可以找项目中这个的配置地方).

重要代码:

proxy: \{  
      '/api':\{  //代码加载的时候 用 /api 替换 target的地址      
        target:'http://222.6.10.14:70',  //API服务器的地址 报跨域的地址(外源的地址)  
        ws:true,  
        changeOrigin: true,  //是否跨域  
        // secure: true,  
        pathRewrite: \{  
          '^/api': ''   //需要rewrite的 把请求接口中多余的/api替换掉,  
        \}  
      \}  
    \}

//请求: 注意 /api

axios(\{  
          url: "/api/aaa/bb",  
        \}).then((data) => \{

\}).catch(()=>\{\})

devServer: {  
        open: true,
        host: 'localhost',
        port: 8888,
        https: false,
        hotOnly: false,
      
        before: app => {},
       
        proxy: {
          '/api':{  //代码加载的时候 用 /api 替换 target的地址    
            target:'http://222.6.10.14:70',  //API服务器的地址 报跨域的地址(外源的地址)
            ws:true,
            changeOrigin: true,  //是否跨域
            // secure: true,
            pathRewrite: {
              '^/api': ''   //需要rewrite的 把请求接口中多余的/api替换掉,
            }
          }
        }
    
      },
    
    //例如 vue页面请求 
       axios({
              url: "/api/aaa/bb",
            }).then((data) => {
    
    }).catch(()=>{})
    
    //运行过程 /api 会被 配置的代理 target 替换 http://222.6.10.14:70/aaa/bb.
    代理中的重定向  pathRewrite.如果不加 请求的接口地址:http://222.6.10.14:70/api/aaa/bb.

发表评论取消回复

表情：

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

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

相关阅读

相关 vue3配置proxy解决跨域

域问题是前端开发中较常见的问题，因为javascript的浏览器会支持同源策略，如果域名、协议、端口任意不同就会产生跨域，如果非同源，那么在请求数据时，浏览器会在控制台中...

妖狐艹你老母/ 2024年04月20日 08:15/ 0 赞/ 9 阅读

相关【Vue】 Vue项目中的跨域配置指南

------------------- 她坐红帐面带浓妆唢呐一声唱明月光这女子泪眼拜高堂一拜天地日月二拜就遗忘这一生跪三拜红尘凉 ...

朱雀/ 2024年04月17日 11:23/ 0 赞/ 14 阅读

相关 vue配置跨域

1，引入 axious,cd 到你的工程 npm install --save axios vue-axios 在 main.js 中加入 impor

墨蓝/ 2023年10月18日 15:22/ 0 赞/ 69 阅读

相关 Vue--跨域

原文网址：[Vue--跨域\_IT利刃出鞘的博客-CSDN博客][Vue--_IT_-CSDN] 方案1：webpack 其他网址 > [VUE axios 跨域问题

我会带着你远行/ 2023年01月10日 09:58/ 0 赞/ 246 阅读

相关 Vue.js跨域请求配置、Node.js设置允许跨域

Vue跨域配置在Vue项目目录中打开config/index.js,在proxyTable中添写如下代码： // 跨域处理 proxyTabl

╰+攻爆jí腚メ/ 2022年12月31日 07:30/ 0 赞/ 173 阅读

相关 Vue 跨域配置

在package.json同级目录下新建文件vue.config.js；内容如下： module.exports = { //自行复制黏贴

骑猪看日落/ 2022年10月05日 05:58/ 0 赞/ 131 阅读

相关 java配置跨域springboot配置Cors跨域

springboot配置Cors跨域、java最简单配置跨域解决方案 > aiprose 个人随笔上线，网址 [aiprose.com][] [点击访问][Link 1]

短命女/ 2022年05月31日 01:20/ 0 赞/ 473 阅读

相关 vue-cli使用axios配置跨域

axios.js配置 import axios from 'axios'; import qs from "qs"; axios.defaults.t

àì夳堔傛蜴生んèń/ 2022年04月23日 06:44/ 0 赞/ 183 阅读

相关 vue跨域请求

proxyTable: \{ '/test' : \{ target: 'http://127.0.0.1:10000/', changeOrigin: true \}

深碍√TFBOYSˉ_/ 2021年09月14日 04:56/ 0 赞/ 362 阅读

相关 vue 跨域配置

1.需求 vue项目中有时候会遇到外源的地址域名或端口不一致就会跨域配置.在vue.config.js(有的不是这个文件) 中配置 webpack-dev-

梦里梦外;/ 2021年08月26日 19:49/ 0 赞/ 380 阅读