V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
LizzZzzQun
V2EX  ›  Vue.js

无法解决 vue 跨域的问题

  •  
  •   LizzZzzQun · 2020-07-11 02:23:04 +08:00 · 4174 次点击
    这是一个创建于 1616 天前的主题,其中的信息可能已经有所发展或是发生改变。

    小白一枚,设置了 vue.config.ja 中的 proxy 没有用,控制台依旧显示是跨域的问题,我的接口是能正常访问数据的,

    15 条回复    2020-07-13 09:06:08 +08:00
    CHNpeople
        1
    CHNpeople  
       2020-07-11 03:03:26 +08:00
    重启了吗?
    xuanbg
        2
    xuanbg  
       2020-07-11 08:49:00 +08:00
    让你的接口支持 CROS 就好了
    fengxianqi
        3
    fengxianqi  
       2020-07-11 08:57:36 +08:00 via Android   ❤️ 2
    axios.get('/api/aa')

    请求不能带外域
    edk24
        4
    edk24  
       2020-07-11 09:10:57 +08:00
    跨域从后端很好解决.

    接口响应加 CROS 头, nginx 也配置一下

    location / {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

    if ($request_method = 'OPTIONS') {
    return 204;
    }
    }
    f056917
        5
    f056917  
       2020-07-11 09:21:08 +08:00
    @fengxianqi 我上次也是用 nginx 代理跨域,但是页面一直报错跨域,最后发现是请求带外域了[dog]
    f056917
        6
    f056917  
       2020-07-11 09:22:07 +08:00   ❤️ 1
    vue.config.js 修改完了记得重启项目
    meteor957
        7
    meteor957  
       2020-07-11 09:31:28 +08:00
    跨域是浏览器的问题
    suzic
        8
    suzic  
       2020-07-11 09:41:51 +08:00 via Android
    proxy 设置了一般就没问题了,楼主怎么设置的?
    cyrbuzz
        9
    cyrbuzz  
       2020-07-11 10:16:26 +08:00   ❤️ 1
    跨域啊...

    跨域是浏览器端做的限制,所解决的核心问题是浏览器会自动为请求携带 cookies 信息导致的不安全问题。

    常规的解决方案一个是绕过,另一个是放行。

    先说放行,放行需要服务器端配合,为请求的 response 添加 CORS 头信息,当然并不一定要在服务器端做,只要在到达浏览器前这个 response 里携带了 CORS 头信息就好。

    再说绕过,绕过即是 vue 等所做 proxy 的原理,上面说到跨域其实是浏览器所做的限制,而 proxy 所做的是用 Node 做一次转发,Node 脱离了浏览器环境不受跨域限制而此时你再通过这个 Node 得到返回内容,所以想要 proxy 生效,你要做的是确保你的请求经过的是 proxy 。

    假如你的域是`localhost:8080`,proxy 设置的`/api`,目标是`www.baidu.com`。设置 proxy 之后请求的是`http://www.baidu.com/api/xxx`,这样是否能跨域取决于 www.baidu.com 是否设置了跨域,此时的流程是 应用程序 -> baidu -> 浏览器 -> 应用程序。理想状态应该是 应用程序 -> 代理 -> baidu -> 代理 -> 浏览器 -> 应用程序。
    QingStone
        10
    QingStone  
       2020-07-11 10:24:28 +08:00
    新增 /修改 vue.config.js ,都是需要重启项目运行的。
    另外,最好贴下代码,看看你咋配置的
    shuiniushushu
        11
    shuiniushushu  
       2020-07-11 12:45:49 +08:00
    使用 vue.config.js 配置代理:
    ```js
    module.exports = {
    ...
    devServer: {
    proxy: {
    'xxx/index.php': {
    target: 'https://xxx.yyy.com/',
    },
    }
    }
    ...
    }
    ```
    yaphets666
        12
    yaphets666  
       2020-07-11 13:03:43 +08:00
    首先 proxy 只是配置 webpack-dev-server 的代理 proxy:{"/api":{......}}假如这样写的话 那么 你去前端需要跨域的接口 都要加"/api"前缀 就是"/api/getSomething" 生产环境的代理需要 nginx 配置
    LizzZzzQun
        13
    LizzZzzQun  
    OP
       2020-07-12 01:20:38 +08:00
    问题解决了,是 CORS 的问题,我在 apache 中设置了 Access-Control-Allow-Origin: *以后,可以正常的读取数据了,谢谢各位老哥的帮忙!!
    LizzZzzQun
        14
    LizzZzzQun  
    OP
       2020-07-12 02:12:26 +08:00
    @edk24 加了以后就好了
    darknoll
        15
    darknoll  
       2020-07-13 09:06:08 +08:00
    @LizzZzzQun 问题不是这样解决的,你 devserver 配好了还要什么 cors
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   995 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 18:41 · PVG 02:41 · LAX 10:41 · JFK 13:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.