在本地启动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的更多相关文章

  1. 前后端分离 导致的 静态页面 加载 <script type="module" > 报CORS 跨域错误,提示 blocked by CORS policy

    1.前言 静态页面 加载 <script type="module" > 报CORS 跨域错误,提示Access to script at ftp:///xxx.js ...

  2. 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 ...

  3. 【记录】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 ...

  4. 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 ...

  5. Spring Boot 集成Angular程序

    假设 1.你已经完成了Spring Boot的示例,在浏览其中输入http://localhost:8080/index,能够返回html页面. 2.你已经完成了Angular程序,名字为quicks ...

  6. Access to XMLHttpRequest at xxxx from origin ‘null‘ has been blocked by CORS policy:

    使用前后端分离的方式创建web项目的时候出现问题: 这是因为 ajax 请求的对应的域在本地的一个文件路径,比如在D盘的某个文件夹,这里存放的都是前端文件: 但是对应的服务器是 localhost 的 ...

  7. 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域名,注意只要域名就够了, ...

  8. 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, 最终:

  9. 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 ...

随机推荐

  1. iOS 去掉tabaar上面的 一条线

    iOS 去掉tabaar上面的 一条线 利用一个 1像素高的图片 [[UITabBar appearance] setShadowImage:[UIImage imageNamed:@"tr ...

  2. Unity WP8开发环境

    Unity WP8开发环境   VS2012旗舰版: 安装WP SDK8.0出错提示: 根据当前系统时钟或签名文件中的时间戳验证时要求的证书不在有效期内 解决办法: 方法一:把操作系统的时间日期调整到 ...

  3. 〖Linux〗通过USB连接,共享Linux上的网络,使用Android手机上网。

    1. Android手机上打开USB共享 2. Linux上修改USB0的ip地址并启用 sudo ifconfig usb0 192.168.42.127 up 3. Android手机上修改路由表 ...

  4. jsp基本语法总结

    一,用jsp脚本元素调用java代码 1,jsp表达式的应用 jsp表达式将值直接插入到输出中: <%= Java Expression %>  代表一个值 隐式对象,在使用jsp表达式的 ...

  5. cxf 生成客户端代码调用服务

    cxf是另一种发布webservice的方式,与jdk提供的相比 jdk提供的是wsimport cxf 提供的是 wsdl2java- d 地址 根据http://www.cnblogs.com/f ...

  6. MySQL查看和修改wait_timeout

    1.全局查看wait_timeout值 mysql> show global variables like 'wait_timeout'; 2.修改全局wait_timeout值 set glo ...

  7. Docker入门二

    容器管理 1.docker create创建一个容器,但容器并没启动,就和我们创建虚拟机一样,创建了虚拟机后没启动 [root@centos-02 ~]# docker create -it cent ...

  8. jquery.validate校验+jquery.form提交,配合使用

    原文链接:http://www.cnblogs.com/datoubaba/archive/2012/06/06/2538873.html 概述:本篇主要讨论jquery.validate结合jque ...

  9. psr-0和psr-4命名规范(未完)

    这些命名规范都是为为自动加载服务(避免项目中有很多的include和require) psr-0: 1.命名空间必须与绝对路径一致 2.类名首字母必须大写 3.除入口文件外,其他“.php”必须只有一 ...

  10. ubuntu16.04字体设置

    我在ubuntu下主要有2个应用,一个是终端,一个是firefox浏览器 1.在终端下,我喜欢“Courier 10 pitch regular”,字号是14.Courier是一种专门为程序员设计的字 ...