Requests blocked by CORS policy in spring boot and angular
在本地启动Spring Boot后端和Angular前端调试时遇到跨域访问的问题导致前端请求失败。
错误描述
Access to XMLHttpRequest at 'http://localhost:8080/...' from origin 'http://localhost:4201' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
解决方案
添加一个Filter使后端支持跨域访问,Spring Boot会自动扫描Filter,无需手动添加。
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component; @Component
public class SimpleCORSFilter implements Filter { private final Logger log = LoggerFactory.getLogger(SimpleCORSFilter.class); public SimpleCORSFilter() {
log.info("SimpleCORSFilter init");
} @Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletRequest request = (HttpServletRequest) req;
HttpServletResponse response = (HttpServletResponse) res; response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With, remember-me"); chain.doFilter(req, res);
} @Override
public void init(FilterConfig filterConfig) {
} @Override
public void destroy() {
} }
参考:https://stackoverflow.com/questions/32319396/cors-with-spring-boot-and-angularjs-not-working
转载请注明出处:https://www.cnblogs.com/keitsi/p/10594758.html
Requests blocked by CORS policy in spring boot and angular的更多相关文章
- 前后端分离 导致的 静态页面 加载 <script type="module" > 报CORS 跨域错误,提示 blocked by CORS policy
1.前言 静态页面 加载 <script type="module" > 报CORS 跨域错误,提示Access to script at ftp:///xxx.js ...
- ElementUI项目请求SpringBoot后台项目时提示:Access to XMLHttpRequest at **from origin ** has been blocked by CORS policy
场景 搭建ElementUI前端项目后提示: Access to XMLHttpRequest at **from origin ** has been blocked by CORS policy ...
- 【记录】uni-app Chrome跨域解决方案插件 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is...
博主最近在用Hbuilder X开发前端网页时, 出现了has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header ...
- has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
前端显示: has been blocked by CORS policy: Response to preflight request doesn't pass access control che ...
- Spring Boot 集成Angular程序
假设 1.你已经完成了Spring Boot的示例,在浏览其中输入http://localhost:8080/index,能够返回html页面. 2.你已经完成了Angular程序,名字为quicks ...
- Access to XMLHttpRequest at xxxx from origin ‘null‘ has been blocked by CORS policy:
使用前后端分离的方式创建web项目的时候出现问题: 这是因为 ajax 请求的对应的域在本地的一个文件路径,比如在D盘的某个文件夹,这里存放的都是前端文件: 但是对应的服务器是 localhost 的 ...
- VUE 出现Access to XMLHttpRequest at 'http://192.168.88.228/login/Login?phone=19939306484&password=111' from origin 'http://localhost:8080' has been blocked by CORS policy: The value of the 'Access-Contr
报错如上图!!!! 解决办法首先打开 config -> index.js ,粘贴 如下图代码,'https://www.baidu.com'换成要访问的的api域名,注意只要域名就够了, ...
- Access to XMLHttpRequest at 'XXX' from origin 'XX' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present o AJAX跨域请求解决方法
今天出现了一个问题找了好久先看代码: 这可能是个BUG吧插入代码: dataType: 'jsonp', crossDomain: true, 最终:
- has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.
https://www.cnblogs.com/caimuqing/p/6733405.html // TODO 支持跨域访问 response.setHeader("Access-Cont ...
随机推荐
- span中内容随着数字长度的添加而增大
场景:导航条中数据,当数据量不大时.仅仅会显示几页,数字仅仅有1,2.3,4..,数字写在span标签中, 则span不须要多宽.设置固定宽度就能够,但当数据量很大的.比如:日志管理--有增 删 改就 ...
- weblogic 内存 及 内存溢出
. 区分JVM虚拟机选项:Xms Xmx PermSize MaxPermSize JVM限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理内存限制 ...
- Ubuntu 设置UFW防火墙
1:安装 sudo apt-get install ufw 2:启用 sudo ufw enable sudo ufw default deny 运行以上两条命令后,开启了防火墙,并在系统启动时自动开 ...
- SQL Server 性能调优(方法论)【转】
目录 确定思路 wait event的基本troubleshooting 虚拟文件信息(virtual file Statistics) 性能指标 执行计划缓冲的使用 总结 性能调优很难有一个固定的理 ...
- sae python中Mysql中文乱码的解决
一開始我用的是: db=MySQLdb.connect(db=sae.const.MYSQL_DB,user=sae.const.MYSQL_USER,passwd=sae.const.MYSQL_P ...
- if-else用法
CreateTime--2016年10月31日14:22:25Author:Marydonif-else的多种用法: //方式一 function test1 (t) { var bl = t | ...
- apk签名相关文章
签名详解:https://stackoverflow.com/questions/4245303/android-sf-file 使用不同的keystore,签名后生成SF文件一模一样正常吗? 正常 ...
- 【ASP.NET MVC系列】浅谈MVC
描述 本篇文章主要概述ASP.NET MVC,具体包括如下内容: 1.MVC模式概述 2.WebForm概述 3.WebForm与MVC区别 4.ASP.NET MVC发展历程 5.运用程序结构 6. ...
- Aperture Time与NPLC
NPLC工频周期数 NPLC是采样电源的周期倍数,N代表是多少倍,PLC与采样电源有关 交流电源的干扰是很厉害的.为了减少交流电源的干扰,一个常用的方法就是把测量周期尽可能的取成交流周波的整数倍,这样 ...
- vue组件调用(用npm安装)
vue用webpack打包方式新建项目,注意刚开始可以先关闭路由和代码错误检测功能 1.建立了一个Hi.vue的组件 <template> <div>Hi~~{{msg}}-- ...