精华内容
下载资源
问答
  • 最近,换了下服务器,用vue开发的项目,前后端分离的,部署后发现这样的问题:所有访问api的url返回的都是404,该项目前端包括3个部分,pc端、h5端以及小程序,他们都是访问同一个接口地址。小程序是没有问题,说明...

    最近,换了下服务器,用vue开发的项目,前后端分离的,部署后发现这样的问题:

    所有访问api的url返回的都是404,该项目前端包括3个部分,pc端、h5端以及小程序,他们都是访问同一个接口地址。小程序是没有问题,说明接口服务不存在问题。

    目前出现问题的是pc端和h5端。

    说下我的服务器环境吧:

    1、tomcat8,(提供接口服务的)

    2、Apache2.4.43

    该项目用到的环境就这2个,当然mysql数据库就不多说了。

    后来经过一系列的排查,是apache设置的缘故。需要在前端站点的【配置文件】下加下以下代码:

    ProxyPass /api http://www.xxx.cn

    另外,在看下我的proxyTable配置吧proxyTable: {

    '/api/*': {

    target: 'https://www.xxx.cn',

    changeOrigin: true,

    pathRewrite: {

    '/api': ''

    }

    }

    },

    其实在我们之前的文章也讲过这个配置了,只是后来忘记了:Apache服务器配置跨域:通过设置反向代理进行跨域

    对于proxyTable设置不明白的,还可以看下本站的这篇文章:vue跨域proxyTable配置详解

    展开全文
  • vue-cli 设置跨域代理,本地正常访问,线上地址报404。这是什么原因?vue-cli中跨域代理设置:module.exports = {dev: {// PathsassetsSubDirectory: 'static',assetsPublicPath: '/',proxyTable: {'/api': {target:...

    vue-cli 设置跨域代理,本地正常访问,线上地址报404。这是什么原因?

    vue-cli中跨域代理设置:

    module.exports = {

    dev: {

    // Paths

    assetsSubDirectory: 'static',

    assetsPublicPath: '/',

    proxyTable: {

    '/api': {

    target: 'https://xxx.xxx-xxx.com',

    changeOrigin: true,

    pathRewrite: {

    '^/api': ''

    }

    }

    },

    // Various Dev Server settings

    host: ip(), // can be overwritten by process.env.HOST

    port: 9999, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined

    autoOpenBrowser: false,

    errorOverlay: true,

    notifyOnErrors: true,

    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    // Use Eslint Loader?

    // If true, your code will be linted during bundling and

    // linting errors and warnings will be shown in the console.

    useEslint: true,

    // If true, eslint errors and warnings will also be shown in the error overlay

    // in the browser.

    showEslintErrorsInOverlay: false,

    /**

    * Source Maps

    */

    // https://webpack.js.org/configuration/devtool/#development

    devtool: 'eval-source-map',

    // If you have problems debugging vue-files in devtools,

    // set this to false - it *may* help

    // https://vue-loader.vuejs.org/en/options.html#cachebusting

    cacheBusting: true,

    // CSS Sourcemaps off by default because relative paths are "buggy"

    // with this option, according to the CSS-Loader README

    // (https://github.com/webpack/css-loader#sourcemaps)

    // In our experience, they generally work as expected,

    // just be aware of this issue when enabling this option.

    cssSourceMap: false,

    },

    build: {

    // Template for index.html

    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths

    assetsRoot: path.resolve(__dirname, '../dist'),

    assetsSubDirectory: 'static',

    assetsPublicPath: './',

    /**

    * Source Maps

    */

    productionSourceMap: true,

    // https://webpack.js.org/configuration/devtool/#production

    devtool: '#source-map',

    // Run the build command with an extra argument to

    // View the bundle analyzer report after build finishes:

    // `npm run build --report`

    // Set to `true` or `false` to always turn it on or off

    bundleAnalyzerReport: process.env.npm_config_report

    }

    }

    utils.js 文件中的请求地址设置:

    function network (path, flag) {

    if (flag) {

    return `api/${path}`

    }

    return `api/api/${path}`

    }

    本地请求正常,线上请求会报404 的错误,线上报错图片:

    展开全文
  • vue cli3 代理跨域 404(失败)问题

    千次阅读 2019-08-28 09:31:33
    情景:在写vue cli 中的代理时,百度了好久也没代理上,最终的问题出在路径重写上。特此记录一下,如果有跟我有一样问题的小伙伴,欢迎前来参考,可根据各自情况和实际问题进行调试。 接口地址: 代理地址为...

    情景:在写vue cli 中的代理时,百度了好久也没代理上,最终的问题出在路径重写上。特此记录一下,如果有跟我有一样问题的小伙伴,欢迎前来参考,可根据各自情况和实际问题进行调试。

    接口地址:

     

    代理地址为(开发环境):

    // .env.development 文件中

    VUE_APP_BASE_API 在不同环境( .env.production文件, .env.staging等文件中)为不同地址。如没有此处,代理地址写死的话,下面的proxy中也要将对应代理地址改掉。如:part2中。

     

     

    注意:百度上搜的重新路径都是  ‘’  (空路径),一直代理不过去。找了半天发现需要代理到  '/' 根路径)。卡了好久,距离就差了这一点点问题(啊 啊啊啊 啊啊)。

     *此处需要根据自己的接口状况来调试代理路径地址

     

    浏览器中接口requestURL显示:

    response中已返回数据:

     

    (part2)不需动态改变proxy需代理的路径(即:下图 'api' 位置处)

    //vue.config.js 文件中

    将地址中       '/api'    代理到      '/'       中.

    输出为:http://127.0.0.1:8080/userInfo/getUserInfoList.do

     

    展开全文
  • 前言因为项目中遇到了这个bug:Vue cil2中配置代理proxytable成功,却无效报错404,在后端和代理都配置无误的情况下,还是报404,先已解决,特记录,希望能帮助到他人;正文1. 为什么要使用代理代理的作用是:把...

    前言

    因为项目中遇到了这个bug:Vue cil2中配置代理proxytable成功,却无效报错404,在后端和代理都配置无误的情况下,还是报404,先已解决,特记录,希望能帮助到他人;

    正文

    1. 为什么要使用代理?

    代理的作用是:把请求代理转发到其他服务器的中间件;

    例如:我们当前主机为http://localhost:8080/,现在我们有一个需求,如果我们请求/api,我们不希望由3000来处理这个请求,而希望由另一台服务器https://www.example.org/api来处理这个请求怎么办?

    这时候就要使用代理来解决!

    2. 在vue中如何使用多个代理?

    module.exports = {

    dev: {

    proxyTable: {

    // 第一个代理

    '/api-test': {

    target: 'https://www.example.org:', /// 目标服务器 host

    ws:true, //是否启用websocket

    secure: true, // 如果是https接口,需要配置这个参数

    changeOrigin: true, // // 默认false,是否需要改变原始主机头为目标URL,是否跨域

    pathRewrite: {

    '^/api-test/old': '/api-test/new' // 重写请求,比如我们源访问的是api-test/old,那么请求会被解析为/api-test/new

    },

    //第二个代理

    '/api-else': {

    target: 'https://197.32.22.33:8090',

    ws:true, //是否启用websocket

    secure: true,

    changeOrigin: true,

    pathRewrite: {

    '^/api-else': '' //默认写法,如果不写pathRewrite就是默认为空;

    },

    //第三个代理

    '/api-three': {

    target: 'https://197.32.22.33:9090',

    changeOrigin: true,

    pathRewrite: {

    '^/api-three': '/api-three' //重写请求,这样本地请求不会有两次/api-three

    },

    }

    },

    上述代码即可在vue-cil项目中配置代理;

    代理的参数有很多,详细可以查看:http-proxy-middleware中的Options,自行添加;

    那下面我们来解析一下为什么会:Vue代理本地proxytable成功,却无效报错404的几种情况

    3. bug 原因分析

    1.在浏览器或postman中测试接口是否正常访问;(最重要!!不然改半天都没用)

    那怎么才是成功的访问呢?

    例如:拿第二个代理举例:你要访问的接口为https://197.32.22.33:8090/api-else/getsomething.json,在浏览器直接输入有返回值并测试无误后再进行下一步;

    2.要确保书写方式完全正确!

    2.1(参考写法2) 这时候你本地去请求的接口地址会变成:http://localhost:8080/api-else/api-else/getsomething.json才是正常的!

    是不是会好奇为什么会有两个/api-else,因为在本地:http://localhost:8080/api-else相当于:https://197.32.22.33:8090,这才是正常的!

    2.2 (参考写法3)

    在按上述写法还是有误的情况下,可以参考写法3的路由去更改测试。例:你要访问的接口为https://197.32.22.33:9090/api-three/getThreething.json,本地配置后:http://localhost:8080/api-three/getThreething.json。

    多说一句,为什么要提第三种写法?

    这种适用于前后端分离多后台项目,后台项目的包名为:api-three,使用第2中写法,在打包之后部署生产环境会出现请求的问题(我们自己项目踩过的坑,偶发),所以之后规定代理和后台包名统一,并且不能直接写在请求中,而是在配置代理后,重写代理的请求,指向包名;

    3.请修改完config的index.js后,答应我一定重启下项目npm run dev;

    4.也是我这次bug的原因(正经脸,这个超级细微!)

    在配置多个代理的情况下,代理名称不能相同,也不能出现重叠的情况!

    错误示范(第二个代理失效):

    proxyTable: {

    // 第一个代理

    '/api-test': {

    target: 'https://www.example.org:', /// 目标服务器 host

    },

    //第二个代理

    '/api-testAAA': {

    target: 'https://197.32.22.33:8090',

    }

    这的错误真的很难发现,在查了源码才看懂的;

    这里说一下,为什么这样写会404!

    vue的代理是基于 http-proxy-middleware实现的,而http-proxy-middleware对走哪个代理名称的的方法如下:

    function matchSingleStringPath(context, uri) {

    const pathname = getUrlPathName(uri);

    return pathname.indexOf(context) === 0;

    }

    是的!他用的是indexOf() === 0来判断的!!!所以如果你的多个代理重叠/api-testAAA和/api-test这样出现的话,他们是都会返回true的!

    但是/api-test更快判断完,所以/api-testAAA就失效了!!!

    结语

    说明:Vue cil的版本号是2,老版本的项目了;之后会记录下新版本vue cil 3+学习过程;

    好了,吐槽完了,希望大家都不要踩坑~

    补充知识:关于Vue的生产环境proxyTable代理问题

    1、通过在 config/index.js 配置文件中找到proxyTable配置项

    dev: {

    // Paths

    assetsSubDirectory: 'static',

    assetsPublicPath: '/',

    proxyTable: {

    '/api': { //3

    target: 'http://xxx:8080',

    changeOrigin: true,

    // secure:false 代理https必须要加

    pathRewrite: {

    // 1 '^/api': '/api' 这种接口配置出来 http://xxx:8080/api/getlist

    // 2 ^/api': '/' 这种接口配置出来 http://xxx:8080/getlist

    }

    }

    }

    }

    2、上面代码里的1和2的区别

    当你接口有api的时候就需要^api的意思就是有api会首先使用api,防止被系统认为3处的api,如果接口中没有api则不需要,即可以省略,总结:

    接口以“/api”开头的配置 数字1 ,没有则不需要

    3、如果配置多个代理

    dev: {

    // Paths

    assetsSubDirectory: 'static',

    assetsPublicPath: '/',

    proxyTable: {

    '/api': { //3

    target: 'http://xxx:8080',

    changeOrigin: true,

    pathRewrite: {

    // A '^/api': '/api' 这种接口配置出来 http://xxx:8080/api/getlist

    // ^/api': '/' 这种接口配置出来 http://xxx:8080/getlist

    }

    },

    '/api/1': { //

    target: 'http://xxx:8081',

    changeOrigin: true,

    pathRewrite: {

    // A '^/api/1': '/api/1' 这种接口配置出来 http://xxx:8081/api/1/getlist

    // ^/api/1': '/' 这种接口配置出来 http://xxx:80801/getlist

    }

    }

    }

    }

    上面的调用接口的时候:

    A/api/1/getlist 即可 http://xxx:8081/api/1/getlist

    /api/getlist 即可 http://xxx:8080/api/getlist

    第二种情况

    /api/1/getlist 即可 http://xxx:8081/getlist

    /api/getlist 即可 http://xxx:8080/getlist

    以上这篇解决VueCil代理本地proxytable无效报错404的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

    展开全文
  • vue解决跨域 还是404

    千次阅读 2019-12-21 14:43:50
    奇怪吧,明明设置了代理,怎么没有生效呢?不是方法不对,而是没有理解proxyTable中节点的意义。其中的“api”节点,这是路由,系统会去根据这个匹配你的地址,匹配上才会生效,proxyTable中可以指定多个路由,一...
  • 先解决history模式的问题:在网站根目录中创建web.config文件,内容如下: //通配所有...但发现接口不能访问,导致页面没有数据了,为了解决跨域的问题我在vue中是这么配置的:module.exports = {devServer:{proxy...
  • 问题:在本地使用了proxyTable代理可以正常跨域请求后台数据,打包上传后就无法获得后台的json文件。查看了相关资料可以用nginx进行解决。还可以使用命名环境变量,请求的时候进行判断,话不多说上干货module....
  • 部署spring boot + Vue遇到的坑(权限、刷新404跨域、内存)项目背景是采用前后端分离,前端使用vue,后端使用springboot。工具工欲善其事必先利其器,我们先找一个操作Linux系统的工具极力推荐FinalShell。一眼看...
  • vue项目使用proxy代理跨域,服务器部署接口404及history模式刷新404界面问题解决
  • 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-cli创建了一个项目,在做登录界面的时候,需要向服务器发送请求获取数据,因为这边做的数据是通过easymock来完成后端服务器数据模拟返回到客户端的,所以需要跨域解决,请求数据的方式是通过axios来的,但是却...
  • 需要nginx的反向代理,(nginx.conf配置文件)laravel 操作:https://www.cnblogs.com/phpk/p/10923128.html中间件在 Laravel 中允许跨域请求,我们可以在app/Http/Middleware/文件夹下构建一个追加响应...
  • 这几天在学习vue,到了其中的网络请求部分,由于是前后端分离结构,所以自然就出现了跨域问题。 关于网络请求部分的配置也记录一下: 首先安装axios cnpm install axios -S 安装后导入到main.js中,进行全局...
  • https://www.pianshen.com/article/9593257962/ 这点特别重要 就是 rewrite ^.+api/?(.*)$ /$1 break; 这一行省略就会报 404 网上说的好多都垃圾 直接添加proxy_pass 放屁呢给我
  • 前后端都部署在我的电脑上,只有端口号不同,前端用的vuecli,采用自带的proxytable设置跨域,但是ajax发送请求的时候,却没有变端口号,状态返回404dev配置如下dev: {// PathsassetsSubDirectory: 'static',...
  • 如果你怎么都没做按如下代码请求,图1:请求后台数据代码就会发生跨域报错问题:图2:跨域报错问题如果请求数据的url不写域名和端口,那么报错404,前面那种是找到了请求所在地,但是不允许被跨域,那么如何解决的呢...
  • 1、vue.config.js配置 2、axois配置 3、用nginx代理 搞定!
  • vue生产环境跨域问题

    2020-09-29 09:26:55
    开发环境可以在vue.config文件依靠vue.cli设置代理服务器,但是打包生成的正式环境就需要在nginx那边配置反向代理,同时router模式也得切换成hash模式 如果是history同时服务器没做处理的话,页面刷新会404页面。...
  • Vue 本地代理编辑好后,能实现跨域获取接口数据,但是打包后在生产环境接口报错404,要怎样才能解决生产环境跨域问题呢? 在开发环境配置好本地代理后,使用Nginx反向代理解决生产环境跨域问题! 1、修改Nginx的配置...
  • 平时我们在使用如vue等诸如此类的前端框架时,难免会回到跨域问题。在本地运行项目时,我们使用axios解决跨域问题。可是当我们部署到服务器上时,则会发现我们前台请求的地址404了,555…,头都整痛了,最后结合网上...
  • 并且可以根据http请求接口不同去配置多种代理,需要注意的是,在封装的axios请求中,http要根据环境去replace掉前面的api,避免请求出现404的情况,target为目标代理服务器地址,changeOrigin:true为允许跨域,...
  • vue的项目中使用axios发送ajax请求,因为跨域,使用了proxy反向代理,开发环境测试没有问题,但是项目打包放到生产环境时报404错误,查了一下解决方案,可以后端设置nginx解决,但是我们这个项目服务器没用nginx,...
  • Vue 本地代理编辑好后,能实现跨域获取接口数据,但是打包后在生产环境接口报错404. 要怎样才能解决生产环境跨域问题呢? 在开发环境配置好本地代理后,使用Nginx反向代理解决生产环境跨域问题! demo: 修改Nginx的...
  • vue项目中axios跨域的问题

    千次阅读 2017-11-02 13:44:59
    2017-11-06更新: ...看了网上的在config/index.js里添加proxyTable代理的方法,结果在我的测试项目里总是报404错误,最终在知乎上看到有位答主说用谷歌浏览器下载一个叫 Moesif Origin & CORS Changer 的
  • 为什么用vue-cli创建之后的项目调用后台接口会出现跨域的问题。直接调去后台接口就会出现404。是因为vue的localhost与访问域名不一致,导致的跨域问题。所以在这里就用到了代理,也就是代理服务器-Proxy Server,也...

空空如也

空空如也

1 2 3
收藏数 46
精华内容 18
关键字:

vue代理跨域404

vue 订阅