springboot+vue发送axios引起的跨域问题

逸帅

项目场景：

<font color=#999AAA >提示：axios发送get和post请求都提示：
Access to script at ‘XXXX’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.</font>

原因分析：

<font color=#999AAA >
本地file文件请求，导致跨域，只有firefox浏览器可以直接从文件中打开，不提示跨域，更换成Firefox浏览器就不显示了(玄学)
</font>

解决方案：

大佬给我加了一个config配置文件，然后啥浏览器都能直接访问了

public class WebMvcConfigurerConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")    //添加映射路径，“/**”表示对所有的路径实行全局跨域访问权限的设置
                .allowedOrigins("*")    //开放哪些ip、端口、域名的访问权限
                .allowCredentials(true)  //是否允许发送Cookie信息
                .allowedMethods("GET", "POST", "PUT", "DELETE")     //开放哪些Http方法，允许跨域访问
                .allowedHeaders("*")     //允许HTTP请求中的携带哪些Header信息
                .exposedHeaders("*");   //暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
    }

特地记录

其实我也没太看懂了，奇奇怪怪，有大佬可以解释一下嘛，我就是单文件通过axios请求得到json数据，利用vue双向绑定，页面数据显示，按理说没有跨域问题，昨天折腾了我好久

fissssssh

你得理解何为跨域
跨域的条件：
1. 非简单请求
2. 域名不同或者端口不同都会引发跨域，浏览器首先会发送一个OPTIONS请求给服务器，如果服务器未在响应头设置Access-Control系列头或者头内容与请求方式不匹配则浏览器会终止本次请求并抛出跨域错误

逸帅

qiduo 发表于 2021-2-10 12:45
域名 协议 端口号，三者有一个不一样就会产生跨域问题。
你开vue是一个服务器，你请求springboot又是一个 ...

好的，谢谢哈，昨天好像是忘记加http的协议头，导致了 跨域问题，你告诉我，我就想起来了...

qiduo

域名 协议 端口号，三者有一个不一样就会产生跨域问题。
你开vue是一个服务器，你请求springboot又是一个服务器。
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

积木工具箱

跨域最好不要用谷歌 很坑

逸帅

积木工具箱 发表于 2021-2-10 12:59
跨域最好不要用谷歌 很坑

好像是我写错了，没加http协议头，应该是我自己的问题

偷喝奶的浣熊

不就是让服务器支持跨域么

zxw75192

逸帅 发表于 2021-2-10 13:10
好像是我写错了，没加http协议头，应该是我自己的问题

你这个报错就是跨域，chrome可以开启非安全模式，或者跨域插件。你加的java代码就是后端允许跨域的header头

zjgt

因为你的vue开了个服务器，springboot也开了一个，本地的话不同端口访问也是跨域，只有一个后端的话可以用vue的反向代{过}{滤}理，也可以在后端开放访问，都可以解决跨域。

netpeng

观摩下讨论，收获良多。