精华内容
下载资源
问答
  • 这几天在学习vue,到了其中的网络请求部分,由于是前后端分离结构,所以自然就出现了跨域问题。 关于网络请求部分的配置也记录一下: 首先安装axios cnpm install axios -S 安装后导入到main.js中,进行全局...

    这几天在学习vue,到了其中的网络请求部分,由于是前后端分离结构,所以自然就出现了跨域问题。

    关于网络请求部分的配置也记录一下:

    首先安装axios

    cnpm install axios -S

    安装后导入到main.js中,进行全局配置

    在组件中调用,这里配置了mounted回调

    在config/index.js中配置代理

    运行cnpm run dev发现仍然出现404错误,几经查找,找到了几种办法

    {
        1:"重新运行cnpm run dev",
        2:"测试接口是否能够正常访问"
    }

     

     

    展开全文
  • vue跨域问题,修改代理后仍出现404

    千次阅读 2019-04-26 11:04:56
    vue跨域问题,修改代理后仍出现404 首先确认安装了axios,安装方法:cnpm install axios -S或者不用镜像npm install axios dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { ...

    vue跨域问题,修改代理后仍出现404

    首先确认安装了axios,安装方法:cnpm install axios -S或者不用镜像npm install axios
    在这里插入图片描述
    dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://40.73.37.92:8090/',//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''//这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add’即可
        }
      }
    },
    

    接口请求用法:
    在这里插入图片描述

    展开全文
  • 环境:vue前端和后端接口部署在同一台机器。 vue服务部署在http://localhost:8081,后台服务部署在http://localhost:8080,可以看到端口是不一样的,在vue通过以下方式请求: export default { name:'Condition'...

    环境:vue前端和后端接口部署在同一台机器。

    vue服务部署在 http://localhost:8081,后台服务部署在 http://localhost:8080,可以看到端口是不一样的,在vue通过以下方式请求:

    export default {
        name:'Condition',
        data(){
            return{
                options:[]
            }
        },
        created:function(){
            this.getdata();
        },
        methods:{
            getdata(){
                this.$axios({
                    method:'get',
                    url:'http://localhost:8080/college/getcollege'
                    }).then(resp => {
                        this.options = resp.data.data.list;
                        console.log(resp.data);        
                    }).catch(resp => {
                        console.log('请求失败:'+resp.status+','+resp.statusText);
                    });
            }
        }
    }

    因为端口不一致,axios就会认为是跨域了,所以就会报错:

    Access to XMLHttpRequest at 'http://localhost:8080/college/getcollege' from origin 'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. [http://localhost:8081/#/]

    这里只介绍通过修改config中的index.js文件中的proxyTable的配置去解决的方法。在网上随便搜一下,基本都是如下的内容:

            proxyTable: {
                "/api": {
                    target: "http://localhost:8080",
                    changeOrigin: true,
                    pathRewrite: {
                        '^/api': ''
                    }
                }
            },

    修改后,绝大部分人都会遇到404的错误,如下:

    the server responded with a status of 404 (Not Found) [http://localhost:8081/college/getcollege

    奇怪吧,明明设置了代理,怎么没有生效呢?不是方法不对,而是没有理解proxyTable中节点的意义。其中的“api”节点,这是路由,系统会去根据这个匹配你的地址,匹配上才会生效,proxyTable中可以指定多个路由,一开始会认为这个是规定格式,所以都不会去修改,除非你的api部署地址是这样的“http://localhost:8080/api/*”,恭喜你,你的问题可能解决了,但是根据我的地址是“http://localhost:8080/college/getcollege”,就完蛋了,那么该怎么改,如下:

            proxyTable: {
        //碰到college路由就会起作用了
                "/college": {
                    target: "http://localhost:8080",
                    changeOrigin: true,
        //重定向,一般可以不用写,或者值写出空''
                    pathRewrite: {
                        '^/college': '/college'
                    }
                }
            },

    OK,问题解决。

    展开全文
  • vue项目需要访问访问后台接口,因为前端项目是一个单独的服务,后台接口肯定也是单独的服务,两者之间的访问地址和端口坑定不一样,一访问后台接口肯定会出现跨域问题,什么是跨域,大概意思就是要访问的地址与当前...

             vue项目需要访问访问后台接口,因为前端项目是一个单独的服务,后台接口肯定也是单独的服务,两者之间的访问地址和端口坑定不一样,一访问后台接口肯定会出现跨域问题,什么是跨域,大概意思就是要访问的地址与当前服务启动的地址不同,或者说端口不一样,就相当于你从当前链接访问到一个新的链接当端口和域名发生改变时就会导致跨域问题的出现,

          这边在网上搜索了一下怎么解决vue项目中的跨域问题,大部分都说在config下index.js文件中的proxyTable配置一下就好了,

    我在本地测试了一下,按照第一种方法,访问报404,,访问地址没有指向我配置的target,,,后面又找了一些资料,发现了第二种方法,在我本地测试了一下,可以成功请求后台接口,并且也接收到了后台的响应参数

    
    第一种方法(网上大部分的写法)
    proxyTable: {
            '/api':{
            target:'http://xxxx.com',
            changeOrigin: true,
            pathRewrite: {
              '^/api': '/'
            }
          }
        }
    第二种方法(亲测有效的方法)
    proxyTable: {
            '/api/*':{
            target:'http://xxxx.com',
            changeOrigin: true,
            pathRewrite: {
              '^/api': '/api'
            }
          }
        }
    

    以下是我本地测试访问后台接口的截图

    两个页面请求的前缀不同,指定访问的后台地址也就不一样

     

     

    在页面上打断点,可以看到请求后台接口成功,并且响应了参数

    展开全文
  • Vue代理报错404问题Vue代理报错404问题第一种路径拼接 /api 情况第二种路径不变情况 Vue代理报错404问题 第一种路径拼接 /api 情况 const path = require('path'); function resolve(dir) { return path.resolve(_...
  • vue项目使用proxy代理跨域,服务器部署接口404及history模式刷新404界面问题解决
  • vue cli3 代理跨域 404(失败)问题

    千次阅读 2019-08-28 09:31:33
    情景:在写vue cli 中的代理时,百度了好久也没代理上,最终的问题出在路径重写上。特此记录一下,如果有跟我有一样问题的小伙伴,欢迎前来参考,可根据各自情况和实际问题进行调试。 接口地址: 代理地址为...
  • 我们可以在vue-cli配置文件里面设置一个代理跨域的方法有很多,通常需要后台来进行配置。我们可以直接通过node.js代理服务器来实现跨域请求。 vue proxyTable接口跨域请求调试 在vue-cli项目中的config文件夹下的...
  • https://www.pianshen.com/article/9593257962/ 这点特别重要 就是 rewrite ^.+api/?(.*)$ /$1 break; 这一行省略就会报 404 网上说的好多都垃圾 直接添加proxy_pass 放屁呢给我
  • 因为项目中遇到了这个bug:Vue cil2中配置代理proxytable成功,却无效报错404,在后端和代理都配置无误的情况下,还是报404,先已解决,特记录,希望能帮助到他人; 正文 1. 为什么要使用代理代理的作用是:把...
  • vue设置多个接口跨域代理

    千次阅读 2020-11-04 21:11:55
    // vue的配置文件 module.exports = { devServer: { proxy: { '/zz': { ws: true, target: 'http://api.map.baidu.com/telematics/v3', changeOrigin: true, pathRewrite: {
  • 其实,我们前端也可以解决跨域问题,那就是使用代理。 举个例子: 我请求的地址是这个:http://192.168.12.36:9000/api/SourceManager 但是我本地的vue项目的端口号是8080,这里就涉及到了端口号不一致导致的同源...
  • Vue axios跨域配置proxyTable404错误

    千次阅读 2019-10-08 23:57:24
    配置的config/index.js proxyTable: { '/apia':{ target:'https://api.caiyunapp.com',//目标接口域名 changeOrigin: true,//是否跨域 pathRewrite:{ '^/apia': ''//重写接口,后面可以使重写的新路径,一...
  • 关于vue-cli使用本地API代理解决跨域问题的整个流程:包括新建项目到跨域获取数据 关于vue-cli使用本地API代理解决跨域问题的整个流程 关于vue-cli使用本地API代理解决跨域问题的整个流程
  • 在基于vue-cli的项目中,在开发环境配置(config/dev.env.js)中设置代理,能够将所有/apidomain开头的请求都通过npm run dev启动的express服务器重定向到目标接口 官方文档:...
  • 最开始的时候,因为请求后台出现跨域问题。 查找资料配置proxyTable,解决跨域问题。如下图所示: axios请求页面: this.$axios.post('/api/weblogin/login',data).then(res=>{ console.log(res) }) 后面遇到需要...
  • vue跨域配置代理

    2021-11-03 17:26:38
    module.exports = { devServer: { open: true, host: 'localhost', port: 8080, ... //以上的ip和端口是我们本机的;下面为需要跨域的 proxy: {//配置跨域 ...应该填写你们真实的后台接口 ws: true
  • 在用vue做前端开发的时候,因为一般跑vue使用的webpack自带的node服务,而我们实际要使用的数据确是后台服务器上的,所以这就涉及到服务器请求跨域的问题。本来在诸如axios之类的网络请求参数里面配置 ...
  • 注意 两个api的名字,不能是包含关系,不然会404,比如 一个 "/api" 另外一个"apia" 这样会报错404 proxyTable:{ "/apia":{ target:"http://11.36.4.9:8046",//后端接口的域名 //secure:false,//如果是https接口,...
  • vue 跨域 反向代理

    千次阅读 2018-03-12 09:41:37
    Nginx proxy_pass 本地调试跨域接口前言Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器.Nginx 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点...
  • } #代理接口 location /api/ { proxy_set_header X-Real-IP $remote_addr; #接口路径 proxy_pass http://127.0.0.1:8000/api/; proxy_redirect off; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_...
  • vue跨域代理

    2020-12-18 17:37:28
    在项目根目录创建vue.config.js文件 const webpack=require('webpack') //设置基准地址,我随便写的一个地址 baseURL="http"//192.168.0.0.1:8080" module.exports = { publicPath: '/abc', devServer:{ port:8080...
  • Nginx反向代理解决Vue跨域问题

    千次阅读 2020-04-04 15:22:34
    项目前后端分离,前端项目使用vue框架书写,在请求后端接口时,由于服务运行在不同的服务器,就会出现跨域问题。 示例: 前端项目的项目地址为:192.168.1.2:8082 后端项目的项目地址为:192.168.1.3:8083 ...
  • 一、跨域问题 (一) 跨域请求是非常常见的现象,那么是由什么原因造成的呢,例如,在A地址(发起请求的页面地址)向B地址(要请求的目标页面地址)发起请求时,如果A地址和B地址在: 协议 域名 端口 有一部分不相同...
  • vue3.0 设置代理模式 访问404问题 项目根目录下包含config目录的都是2.0的项目,vue3.0需手动在根目录下新建vue.config.js,基础代理代码如下 module.exports = { // 相当于webpack-dev-server,对本地服务器进行配置...
  • 说明:vue项目启动时默认的端口是8080(可以在config目录下的index.js文件中修改),跟后端的端口肯定不一样,这样vue页面请求后端接口的时候,由于端口不一致,肯定就存在跨域问题,而vue可以通过代理很好的解决...
  • vue跨域代理的设置-vue2.5亲测有效

    千次阅读 2018-09-15 10:42:55
    本文原创地址:... 假如你要用的接口是:http://jspang.com/DemoApi/oftenGoods.php 第一步:找到config文件夹中的index.js设置pxoxyTable dev: { proxyTable: { '/api': { target: 'http:...
  • Vue项目代理-解决接口访问跨域问题

    千次阅读 2018-08-01 15:35:23
    Vue解决跨域问题的原理就是代理,具体操作如下 1.打开 config -> index.js 2. 找到proxyTable 3.粘贴 如下代码,'https://www.baidu.com' 换成要访问的的api域名,记住是域名,不是整个api地址。代码(效果图...
  • 浏览器对于JavaScript具有同源策略,服务器之间没限制,vue在调试时会自动启用一个本地服务,我们在调用跨域接口时通过代理即可让本地的服务代理浏览器的请求接口,获取结果再返回给浏览器,这样就实现了跨域。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,513
精华内容 3,805
关键字:

vue跨域代理之后接口404

vue 订阅