V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Gaays
V2EX  ›  前端开发

为什么后端接口可以通过浏览器输入地址请求,前端项目种请求会报跨域的错

  •  
  •   Gaays · 2022-03-16 10:48:50 +08:00 · 2043 次点击
    这是一个创建于 1016 天前的主题,其中的信息可能已经有所发展或是发生改变。

    后端没有配置跨域,但是接口可以通过浏览器地址栏输入直接访问,我在前端项目中用 axios 访问请求地址会报跨域的错误。为什么浏览器直接访问接口不会报跨域的问题呢?

    12 条回复    2022-03-16 13:46:25 +08:00
    molvqingtai
        1
    molvqingtai  
       2022-03-16 10:54:04 +08:00 via Android   ❤️ 1
    浏览器地址没有跨域限制
    HyperLuo
        2
    HyperLuo  
       2022-03-16 10:56:13 +08:00
    报的 504 跨域是吧 我刚开始工作也经常遇到 应该和代理有关系
    hronro
        3
    hronro  
       2022-03-16 10:57:05 +08:00
    建议你先去搞清楚什么叫跨域
    IceBay
        4
    IceBay  
       2022-03-16 10:57:21 +08:00   ❤️ 2
    因为浏览器为了安全限制了。自己主动访问是不会受限的。
    kera0a
        5
    kera0a  
       2022-03-16 10:57:59 +08:00
    跨 “域” 啊
    misdake
        6
    misdake  
       2022-03-16 10:58:24 +08:00
    跨域的跨,是指从一个到另一个。没有来源,就无所谓跨
    moreant
        7
    moreant  
       2022-03-16 11:02:28 +08:00   ❤️ 2
    axios 也是基于 ajax 的吧。
    最直接的体现就是 浏览器地址直接访问在网络中会分类在 “文档”,axios 访问会分类在“Fetch/XHR”

    https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS
    gydi
        8
    gydi  
       2022-03-16 11:40:46 +08:00
    简单来说,你在域 a 访问了域 b 的东西,叫跨域。你在前端访问接口,首先你的前端页面是域 a 的资源,然后你去访问域 b ,就跨了。直接在浏览器地址栏里输入接口,这个新的 tab 里,只涉及一个域,就是接口那个域,并没有跨别的。
    yaphets666
        9
    yaphets666  
       2022-03-16 11:56:17 +08:00 via iPhone
    确实,如同 7 楼所说的话,文档作为静态资源是不受跨域限制的,XMLRequest 是受限制的
    0o0o0o0
        10
    0o0o0o0  
       2022-03-16 12:02:04 +08:00   ❤️ 1
    [ url 协议、域名、端口 ] 组成一个域。
    在 js 中发送请求后,浏览器会首先判断是否在当前的域中,如果是当前的域,那么直接发送请求,如果不是,则发送跨域请求(跨域请求又分为简单请求和非简单请求,简单请求比如 get 就是直接在原来的请求头部添加一个 Origin 参数,值是当前的域。非跨域请求则会先发送一个预检查,再做之后的处理。)
    服务器收到请求后首先查看是否有 Origin ,如果没有说明不是跨域,直接处理就好,如果有就得看看允不允许这个域。
    也就是对于简单跨域请求 js 发出跨域请求 -> 浏览器添加跨域信息 -> 服务器识别跨域信息,并判断是否允许跨域。
    而对于浏览器地址栏、html 中没有设置 crossorigin 的 img 标签,浏览器是不会加上跨域信息的,服务器也就不会认为这是一个跨域请求。
    ps:这只是简单的情况。
    muzuiget
        11
    muzuiget  
       2022-03-16 13:46:02 +08:00
    直接访问接口就不算跨“域”了啊。
    est
        12
    est  
       2022-03-16 13:46:25 +08:00
    这就是理解了跨域这个行为,但是不明白为什么要设定 域 这个概念。

    简单的说,如果 A 网站发起一个请求可以拿到 B 网站的返回,那上网不就等于裸奔?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2655 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 00:24 · PVG 08:24 · LAX 16:24 · JFK 19:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.