精华内容
下载资源
问答
  • vue配置跨域无效
    千次阅读
    2022-05-18 19:54:47

    一、常规跨域配置

    假如我有一个请求跨域了,请求url为:http://172.21.34.65:8090/kweb/temp/testCros,现在我要代理它。则常规配置如下:

    module.exports = {
        devServer: {
            port: 8888, //前端服务启动的端口号
            host: 'localhost', //前端服务启动后的访问ip,默认为localhost, host和port组成了前端服务启动后的访问入口。
            https: false,
            open: true,
            proxy: {
                '/kweb': { //拦截上下文
                    target: 'http://172.21.34.65:8090', //匹配到要代理的上下文后,将上下文前面的地址替换为此代理地址
                    changeOrigin: true, //是否跨域
                    pathRewrite: {
                        '^/':'' //拦截到的上下文重写,这里可以将 kweb 重写为空或者其它值,因为我不需要重写,所以这里这么配置。
                    }
                }
            }
        }
    }

    请留意host、port的注释说明,这两个参数配置了前端服务的访问入口。

    二、跨域不生效探究

    跨域产生的根源归根结底是浏览器的同源策略(所以我们用postman或者通过后端代码调用服务不会遇到跨域问题),至于什么是同源策略这里不过多介绍,感兴趣的可以搜索细看。这里直接讲解跨域的解决方式,及其本人遇到的不生效原因探查。

    首先vue中跨域问题是通过代理(请求转发)解决,代理的本质是创建一个代理对象,代理当前前端服务的请求,将该请求转发给指定的服务端,再将服务端返回的结果转发给前端。所以能代理的请求必须和当前前端服务保持一致。即要代理的请求url,其对应的ip和port必须与devServer中的host port保持一致。 

    为什么呢?

    跨域配置中的host port,是前端服务启动后的访问地址,因为我们通常是在本地启动,所以host一般不需要配置,默认是localhost ,不过也可以配置成0.0.0.0,这样同一网段的所有主机都可以访问了,port是前端服务启动后的访问端口,默认是8080,存在端口冲突时可以通过配置该参数进行解决。前端中的所有请求,只要使用的是该host port,那么就会被该配置拦截,如果我们配置了代理,那么就会进一步匹配上下文,如果上下文匹配上了,则可以进行请求的代理发送。

    到这里基本可以猜出来为什么代理不生效了吧!

    即axios发送请求时,如果url中不包含ip port,那么默认会用前端服务的host port作为其ip port,此时这个url一定会被代理拦截,然后再进一步匹配上下文,如果匹配则进行代理的转发。如果axios url中的ip port和配置的host port不同,那么就不会进入代理拦截,更不会进入上下文的匹配和跨域代理转发

    三、总结(建议)

    通过以上分析,推荐再axios请求发送时不要添加ip port,而是再代理转发时通过target参数配置,因为我们如果在axios请求中不添加ip port,那么前端服务会使用默认的host port,那么它一定会进入代理配置中,此时只要上下文匹配上,就会进行代理转发。

    如果需要代理不同服务器的请求也不用担心,因为在代理配置中我们可以配置多个上下文拦截,进而代理不同服务器的服务请求

    上面这些信息是我通过查资料和本人试验验证出来的,并没有从源码角度追踪验证其正确性,如果有不对的地方,欢迎指正。


     

    更多相关内容
  • vue配置跨域无效问题

    千次阅读 2022-04-02 17:43:28
    vue配置proxy跨域代理后还是提示跨域问题 多半是没有正确配置使用 proxy 检查配置使用 vue.config.js配置proxy devServer: { open: true, host:'88.1.131.35',//用来启动Network port: 8000, proxy: { '/...

    vue配置proxy跨域代理后还是提示跨域问题

    在这里插入图片描述
    🔥多半是没有正确配置使用 proxy

    检查配置使用

    1. vue.config.js配置proxy
      devServer: {
        open: true,
        host:'88.1.131.35',//用来启动Network
        port: 8000,
        proxy: {
            '/api': {
                target: 'http://xxxxxxxxxx:8000',
                changeOrigin: true,
                ws: true,
                secure: false,
                logLevel: 'debug',
                pathRewrite: {
                    '^/api': '/',
                },
            },
          }
        },
    
    1. request.js中配置的 baseURL
    const service = axios.create({
        // 公共接口
        baseURL: process.env.NODE_ENV === "production" ?'http://xxxxxxxx:8000/':'',
        // 超时时间
        timeout: 10 * 1000,
    })
    
    //如果是线上环境,项目不用走vue的proxy代理。 baseURL为 http://xxxxxxxx:8000/,当使用接口时,
    //接口前会自动添加http://xxxxxxxx:8000/
    //如果是开发环境,项目会走`devServer`代理
    

    3.开发环境接口调用时 url 设置格式为 ‘/api/getNum/xx/xxx’ 必须有/api,proxy才会拦截到接口使用代理。

    4.注意接口为GET还是POST请求

    展开全文
  • vue config.js 配置跨域不生效

    千次阅读 2020-12-02 18:24:54
    vue config.js 配置跨域不生效 首先,我的config.js文件没有问题 module.exports = { devServer: { open: true, host: 'localhost', port: 8080, https: false, hotOnly: false, proxy: { // 配置跨域 '/...
    vue config.js 配置跨域不生效

    首先,我的config.js文件没有问题

    module.exports = {
      devServer: {
        open: true,
        host: 'localhost',
        port: 8080,
        https: false,
        hotOnly: false,
        proxy: {
          // 配置跨域
          '/api': {
            target: '',//后端接口地址
            ws: true,
            changOrigin: true,
            pathRewrite: {
              '^/api': ''
            }
          }
        },
        before: app => {}
      }
    };
    
    

    但是配置好后,重启终端运行前端代码,这个时候发起axios请求,报错 404 ,localhost:XXX,接口找不到

    问题定位:

    由于设置了 proxy 解决跨域,所以发起数据请求,理应是后端接口响应,而不应为localhost 响应,所以这里断定,设置的 vue.config.js文件未生效!

    解决方法

    axios默认请求接口就是localhost,所以这里需要更改 axios设置的默认请求设置

    在 main.js 文件里,设置

    axios.defaults.baseURL = '/api'
    

    重启,发现问题解决!!!

    展开全文
  • vue.config配置跨域失败

    2021-09-19 20:02:49
    如果你的跨域配置一直得不到成功 请看network里面你的访问地址是否正确

     如果你的跨域配置一直得不到成功

    请看network里面你的访问地址是否正确

     

    展开全文
  • Vue项目,因为前后端分离,所以在请求后端接口时,时常遇到跨站问题, 1、如果前后端项目部署时候不在同域名下,前端不用配置,后端做好CORS配置即可,后端配置可参考...
  • 今天小编就为大家分享一篇vue cli3 配置proxy代理无效的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 但是proxy的配置无效 <code class="language-javascript">module.exports = { devServer: { port: 8888, proxy: { '/api': { target: 'http://127.0.0.1:9002/', ws: true, ...
  • 前后端分离解决跨域问题几种处理方案
  • Vue-cli跨域失效

    2021-11-03 19:40:18
    等我吃完晚饭后还特地回去找了一篇关于Vue-cli使用vue.config.js文件进行配置跨域基本原理的视频(之前并没有接触过跨域),从而得知:跨域的原理是配置一个拦截器,当发送请求的路径出现与拦截条件相同的字段时,会...
  • 前端vue开发中的跨域问题解决,以及nginx上线部署。(vue devServer与nginx)
  • 一:为什么会出现跨域问题? 出于浏览器的同源策略限制。 同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是...
  • vue跨域问题

    千次阅读 2022-04-15 13:40:13
    vue跨域问题一、vue跨域问题展示:二、问题描述:三、解决方案:1、vue端修改vue.config.js文件2、具体请求处使用jsonp3、服务端解决4、文件存储服务器端解决 一、vue跨域问题展示: 二、问题描述: 原理 跨域...
  • 关于vue-cli3中配置请求跨域的问题 根据Vue CLI3官方文档, 需要在vue.config.js文件中配置devServer.proxy选项来解决跨域问题。 1.关于vue.config.js文件 此文件在vue-cli3中不会自动生成,需要手动在项目根目录下...
  • vue3配置proxy解决跨域

    千次阅读 2019-09-20 11:17:03
    跨域问题是前端开发中较常见的问题,因为javascript的浏览器会支持同源策略,如果域名、协议、端口任意不同就会产生跨域,如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问,错误信息如下...
  • 解决vue-cli4跨域问题

    2021-10-14 15:43:20
    1.新建vue.config.js module.exports={ publicPath:"./", //用法和webpack本身的output.publickPath用法一致 devServer: { proxy: { '/api': { //axios要请求的,name target: '...
  • vue cli旧版本配置跨域 在config/index.js中配置 proxyTable: { '/api': { target: 'http://localhost:8080', pathRewrite: { '^/api': '/static/mock' } } } vue cli4配置跨域 在package.json同级目录下...
  • vuecli的配置文件 ... //配置跨域 "/api": { target: "http://axios.qitianlie.com/", //这里后台的地址模拟的;应该填写你们真实的后台接口 // target: "http://localhost:8088/", ws: true, cha
  • <p>2、vue.config.js 设置了跨域 <p><img alt="" height="899" src="https://img-ask.csdnimg.cn/upload/1616512503195.png" width="1199" /></p> <p>3、请求 报错 <p><img alt="" height="509" src=...
  • 原理: 1、将域名发送给本地服务器(localhost:9528) 2、再由本地服务器去请求真正...以下是vue.config.js的详细配置: devServer: { // 跨域 proxy: { // 只要axios请求中带有/api的url,就会触发代理机制 '/ap
  • Vue如何设置跨域

    2020-12-19 14:00:52
    1、开发环境下,如何做好跨域配置首先跨域我们要配置的文件有:config下的index.jsdev: {proxyTable: {'/api': {target: 'http://10.1.5.11:8080/',//设置你调用的接口域名和端口号changeOrigin: true, //跨域...
  • 当我们使用spting boot 前端界面是vue的时候会发现vue请求不到后端界面这个时候就需要我们做一下跨域问题的处理 1.首先你要解决跨域问题肯定是要给后端接口发请求的对吧所以你要先引入axios对不对讲道理 一.npm ...
  • 主要介绍了前后端分离 vue+springboot 跨域 session+cookie失效问题的解决方法,解决过程也很简单 ,需要的朋友可以参考下
  • vue proxy跨域设置失败 changeOrigin: true

    千次阅读 2021-12-25 23:33:13
    正常是这样: ... open: true, // vue项目启动时自动打开浏览器 proxy: 'https://baidu.me', // 写你要请求的接口地址 } }, disableHostCheck: true }, }; 如果无效请检查,试试是不是’http
  • 问题 如图所示,前端页面做了一个验证码,但是打开来看,其访问地址和host的地址一样,并不能到达后端接口处 项目大致结构如上所示,vue.config.js...在config目录下的index.js里面配置跨域配置,就可以生效了 ...
  • true, pathRewrite: { //重写路径 "^/server": "" } }, }, }, } vue 用脚手架 搭建的项目 打包后 直接访问 index 出现空白 是因为index 打包后 引入的路径不对 解决方法 在 vue.config.js配置 publicPath: ...
  • app.use(cors()) 服务端这样配置后,前端页面访问接口还是报跨域的问题。 原因 由于我使用的是 fetch 去请求接口,而 fetch 在跨域请求时需要配置 cors 字段,代码如下: fetch('...
  • vue3+vite跨域问题

    2022-06-18 00:08:53
    vue3+vite跨域问题、vite.config.js
  • vue解决跨域问题(下)

    热门讨论 2021-07-06 14:15:13
    最近在学习 vue 与 SSM 实现前后端分离,碰到了一些棘手的问题,首先初次接触前后端分离这个概念还不是很清楚,网上的教程也是比较稀缺,所以自己也是花了点时间来理解了下这个概念,然后网上找了一个案例来看看前后...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,229
精华内容 891
关键字:

vue配置跨域无效