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 ...
随机推荐
- OpenStack 部署总结之:单节点icehouse网桥的配置
部署完icehouse,安装完实例之后.假设虚拟主机须要和外部进行通信.还须要对宿主机的网桥进行配置 宿主机的配置 改动ifcfg-em1的内容为下面内容: DEVICE=em1 ONBOOT=yes ...
- Netbeans配合xdebug调试
http://xdebug.org/download.php 下载对应的xdebug的dll不知道php文件中的ext文件夹中 并且加入以下配置在php.info 然后重启apche zend_ext ...
- 用一段直径为1的原木制作截面是矩形的横梁,问梁的宽度x和高度y是怎样的比例时,才能使梁的强度最大?
解:根据经验,梁的强度与高度平方成正比,和宽度成反比,可以写成 q=y2x 又有x2+y2=1,得到 q=(1-x2)x=x-x3 而导数q'=1-3x2,当q'=0时,q有极值 q'=0时,x=1/ ...
- 将应用发布到WasLiberty的两种方法
1.直接将War放到defaultserver(或其它自定义server)的dropin目录. 一放进去,war中的app就会随着server启动起来,这个war是会被解压的,用find / -nam ...
- Oracle 之 常用函数
SQL语句根据参数的不同,分为单行函数 和 多行函数. [1] 单行函数:输入是一行,输出也是一行: [2] 多行函数:输入多行数据,输出一个结果. 在执行时,单行函数是检索一行处理一次,而多行函数是 ...
- Android Studio优秀插件汇总
- libsvm处理多分类的问题
SVM是一个二分类器,当遇到多类别的时候,一般采取如下两种策略. a.一对多法(one-versus-rest,简称1-v-r SVMs).训练时依次把某个类别的样本归为一类,其他剩余的样本归为另一类 ...
- 转载:【Linux+windows】PHP5.5安装PHPRedis扩展
首先,你必须安装了 Redis服务器,然后才能安装php-redis扩展,就像先安装mysql,然后再将php-mysql扩展安装并引入(区别是:php-redis扩展插件php没有自带,php-my ...
- python --正则学习
re的正则表达式语法 正则表达式语法表如下: re.match re.match 尝试从字符串的开始匹配一个模式,匹配成功返回match object,否则返回None. 如:下面的例子匹配第一 ...
- HTTP标头信息
HTTP头信息头信息由“键:值”组成.它们描述客户端或者服务器的属性.被传输的资源以及应该实现连接. 四种不同类型的头标 通用头标:即可用于请求,也可用于响应,是作为一个整体而不是特定资源与事务相关联 ...