本地HTML访问后端获取数据使用@CrossOrigin仍出现跨域问题

java 复制代码
Access to XMLHttpRequest at 'http://localhost/api/admin/authorizations' from origin 'http://localhost:9528' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Access-Control-Allow-Credentials 这个头的作用,果然药到病除。这个是服务端下发到客户端的 response 中头部字段,意义是允许客户端携带验证信息,例如 cookie 之类的。这样客户端在发起跨域请求的时候,不就可以携带允许的头,还可以携带验证信息的头,又由于客户端是请求框架是 axios,并且手残的设置了 withCredentials: true,意思是客户端想要携带验证信息头,但是我的服务端设置是 'supportsCredentials' => false, ,表示不允许携带信息头。

WebMvcConfigurer配置跨域用法介绍
https://blog.csdn.net/munangs/article/details/132223699

@CrossOrigin(originPatterns = "*",allowCredentials = "true")

java 复制代码
package xunan.management.boot.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CrossConfig implements WebMvcConfigurer{
//    @Override
//    public void addCorsMappings(CorsRegistry registry) {
//        registry.addMapping("/**")
//                .allowedHeaders("*")
//                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
//                .allowCredentials(true)
//                .maxAge(3600);
//    }
    /**
     *             .addMapping("/**")// 允许跨域访问的路径
     *             .allowedOrigins("*")// 允许跨域访问的源
     *             .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")// 允许请求方法
     *             .maxAge(168000)// 预检间隔时间
     *             .allowedHeaders("*")// 允许头部设置
     *             .allowCredentials(true);  // 是否发送cookie
     */

    //以上这段代码等于@CrossOrigin(allowCredentials = "true")
}

如果用原生的AJAX是加载本地文件就不会出现错误。当然,这个jquery的load放在服务器上通过http加载还是支持的。也有例外比如在firefox和ie浏览器使用$.ajax加载本地html或txt文件时,不会报错。

当其他浏览器控制台弹出下面报错,表明这个不支持跨域浏览本地文件

Access to XMLHttpRequest at 'file:///F:/%E4%BB%A3%E7%A0%81/Jquery/a.txt' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

其实 ,禁止跨域是浏览器的安全限制机制,在每个浏览器下都有,如在chrome、Firefox、opera 、360 都是这样的,同样会报告上述错误,但是可以通过设置来绕过这个限制(如果经常 完前端代码 建议在本机装个web容器。。。),常见的方式是 右击chrome快捷方式,选择"属性",在"快捷方式"下的"目标"中添加" --allow-file-access-from-files"(最前面有个空格),重启chrome即可如下:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files   //注意有空格,关闭浏览器然后重启浏览器即可支持

Jquery的load()一般是加载服务器上的文件(非本地文件),这个概念需要弄清楚。要发布网站后通过http协议进行访问,本地file协议浏览会产生跨域问题。
除非是静态文件html调用load,但是这个也是有的浏览器支持,有的不支持。


加载js文件时使用了file协议,该协议会导致跨域,而使用htpp、https等协议时则没有跨域问题。而使用file协议则是因为在浏览器中查看html文件时没有起服务!平时使用webstorm时会自动起服务,所以没有注意到这个问题。

相关推荐
花花鱼5 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09339 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
激流丶15 分钟前
【Kafka 实战】如何解决Kafka Topic数量过多带来的性能问题?
java·大数据·kafka·topic
Themberfue19 分钟前
Java多线程详解⑤(全程干货!!!)线程安全问题 || 锁 || synchronized
java·开发语言·线程·多线程·synchronized·
EricWang135830 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning30 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
让学习成为一种生活方式36 分钟前
R包下载太慢安装中止的解决策略-R语言003
java·数据库·r语言
web行路人40 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
晨曦_子画41 分钟前
编程语言之战:AI 之后的 Kotlin 与 Java
android·java·开发语言·人工智能·kotlin
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax