精华内容
下载资源
问答
  • 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请求

    展开全文
  • 先看一组标准的配置及请求(请求方式一样不用管 地址差不多就行)其实你可以看着 当我们碰到请求中带有/api的时候 我们自动带上。不用怀疑自己 这样配置是绝对没问题的 这样我们是成功的。vue-cli3.0以后使用的proxy...

    记录vue配置跨域不起作用以及一些理解

    一.proxytable和proxy的区别

    每次搜跨域 都会出来proxytable和proxy 这俩的区别
    vue-cli3.0以前使用proxytable
    vue-cli3.0以后使用的proxy

    二.跨域配置了没有用

    先看一组标准的配置及请求(请求方式不一样不用管 地址差不多就行)

    服务器地址是:127.0.0.1:4050

    在这里插入图片描述
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/8f4d5dca8e994a66ac2e28006aeab6b2.png
    不用怀疑自己 这样配置是绝对没问题的 这样我们是成功的

    三.不成功的可能因素

    1.请求路径写了全路径 这样就是错的 你如果写了全地址 代理的时候变成了
    http://127.0.0.1:4050/http://127.0.0.1:4050/test 很显然是不对的

        fetch("http://127.0.0.1:4050/api/test")
          .then((res) => {
            return res.text();
          })
          .then((data) => {
            console.log(data);
          });
    
    1. 等我碰到了再更新吧

    四.代理的理解

    其实你可以看着 当我们碰到请求中带有/api的时候 我们自动带上
    target(http://127.0.0.1:4050)

     proxy: {
          // 配置跨域
          "/api": {  //需要代理的请求标识
            target: `http://127.0.0.1:4050`, //请求后台接口
            changeOrigin: true, // 允许跨域
            pathRewrite: {
              "^/api": "", // 重写请求 替换请求当中的api这个字符串
            },
          },
        },
    
    展开全文
  • 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-cli3 环境准备 1. 如果您已安装 vue-cli2 ,请先删除当前脚手架,否则无法成功安装 vue-cli3 。 npm uninstall vue-cli -g 2. 检查 node.js 版本。 vue-cli3 需要 node 版本大于8.9。在cmd中输入 node -v ...
  • 问题 如图所示,前端页面做了一个...项目大致结构如上所示,vue.config.js配置完后,本来以为跨域问题就解决了,谁知这个文件根本不生效。 解决方法 在config目录下的index.js里面配置跨域配置,就可以生效了 ...
  • vue项目用webpack中devServer配置proxy代理解决跨域 不生效问题 登录接口写入cookie一直失败,导致后续接口请求发出去跨域报401 后端在各种原因之下暂时无法解决,只能前端暂时配代理开发 但是发现代理配了之后...
  • Vue配置解决跨域

    2022-06-02 10:50:34
    根目录新建文件vue.config.js 用法
  • <p>1、vue cli4.1.0版本; ... <p>2、vue.config.js 设置了跨域 ... <p>3、请求 报错 ...import Vue from '...跨域问题都生效,请大佬指点![抱拳][抱拳][抱拳]              </p>
  • Vue-cli跨域失效

    2021-11-03 19:40:18
    等我吃完晚饭后还特地回去找了一篇关于Vue-cli使用vue.config.js文件进行配置跨域基本原理的视频(之前并没有接触过跨域),从而得知:跨域的原理是配置一个拦截器,当发送请求的路径出现与拦截条件相同的字段时,会...
  • Vue-Cli配置跨域请求

    2021-12-16 15:20:57
    通过配置vue-cli的代理解决跨域访问的问题
  •  vue.config.js文件中的内容,端口号8888是生效的,但是proxy的配置就无效 <code class="language-javascript">module.exports = { devServer: { port: 8888, proxy: { '/api': { ...
  • //这是我的配置 dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: false, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { changeOrigin: true,...
  • 首先,我们先确定跨域源目标没错写错,可以先将Allow-Origin改成*测试 server { listen 80; server_name https://www.test.com; location /static/fonts/ { add_header Access-Control-Allow-Origin *; ...
  • 主要介绍了Spring boot 和Vue开发中CORS跨域问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue.js 配置了前端代理却未能生效 记录一下最近踩得小坑: 配置完代理后请一定重新执行(重要,非常重要!) npm run dev 若重新执行命令后,代理仍为生效,请按下方步骤进行检查: 检查index.js文件中的代理是否...
  • 配置跨域 1.在vue- cli根目录下创建vue.config.js在devServer下配只proxy代码如下 module.exports = { devServer: { open: true, host: 'localhost', port: 8080, https: false, //以上的ip和端口是我们本机的...
  • vue.config.js跨域转发不生效的问题

    千次阅读 2021-01-26 09:59:43
    以下是vue.config.js跨域 需要和src同级目录 且重启生效 let proxyObj = {} proxyObj['/'] = { //目标地址 target: 'http://localhost:8081', //发送请求头中host会设置成target changeOrigin:
  • 在项目根目录下创建vue.config.js文件: vue.config.js: ... open: false, // 配置自动启动浏览器 hotOnly: true, // 是否热更新 proxy: { '/api': { // 路径中有 /api 的请求都会走这个代理 tar.
  • vue-cli3.0使用proxytable解决跨域问题

    千次阅读 2021-01-28 14:42:55
    现代的web开发一般都是前后端分离,前后端使用rest api进行交互,分离使得前后端服务器一般都在一起,这导致了跨域问题,本文说明在vue-cli中解决这一问题跨域问题简述如果浏览器有类似下面的报错信息,则说明碰到...
  • Vue3 前端配置代理解决跨域

    千次阅读 2022-05-06 22:54:10
    一个亲测可用的跨域解决方案.
  • vue跨域配置

    2022-03-01 20:48:05
    vue.config.js中配置服务器 const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ ... // 必须重启服务器,配置才能生效 // proxy:代理 proxy: { '/douyu
  • 最近在做一个前后端分离的毕设,在前端向后端发送get请求时遇到了Vue跨域的问题。 been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource 解决方案如下...
  • vue配置代理打包无法访问
  •  vue.config.js里的配置:端口已经生效了,但是proxy没有生效 <code class="language-javascript">module.exports = { devServer: { port: 8888, proxy: { '/api': { target: '...
  • vue 跨域 proxyTable不生效 解决办法

    千次阅读 2020-02-07 17:15:43
    在网上查了半天,都没行,原来是要把axios再封装一层,再调用就OK了。 1. 修改config目录下的index.js文件 proxyTable: { '/':{ ... changeOrigin: true, ws: true, pathRewrite: { '^/': '' ......
  • vue项目的跨域配置

    千次阅读 2019-11-02 22:31:48
    使用vuecli + webpack进行项目开发时,遇到了需要跨域访问的情况,这里简单记录一下前端的跨域配置,如下: 1、配置本地代理 修改config文件夹下的index.js文件中的dev下的proxyTable属性,如下: ... dev: { //...
  • Vue项目配置代理 前端向服务器发送请求时,经常会遇到跨域问题,那么什么是前端跨域呢?在vue项目中如何利用代理解决呢? 什么是跨域? JavaScript同源策略:当协议、子域名、主域名、端口号中任意一个相同时,...
  • Vue跨域问题(配置代理服务器)
  • 前端vue3解决跨域问题

    千次阅读 2021-11-24 16:46:21
    前端vue3解决跨域问题 适用环境:vue3+axios 问题产生 简单来说,跨域产生的原因是浏览器请求到的前端网页与前端请求的网页在同一个域或同一个端口 比如说我访问了百度www.baidu.com这个网页,百度这个网页加载到...

空空如也

空空如也

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

vue配置跨域不生效