在本地启动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. 根据Ip地址与掩码 得出 子网地址与广播地址

    由于给予条件优先,没有直接给出子网地址与广播地址.但是又需要这两个参数,需要我们使用ip 地址与 子网掩码得出子网地址与广播地址.思路如下:       1. 子网地址, ip地址与 子网掩码分别换算 ...

  2. IOS开发帐号与发布问题综合

    一.iOS开发:AD-HOC版应用测试方法:http://hi.baidu.com/kangle1208/item/163f39530abb4d3195eb05a7 二.plist的方式发布: 1.y ...

  3. angularjs中ajax请求时传递参数的方法

    method1方法使用的是params参数,该用法会把参数直接附加到url中 method2方法使用的是data参数,该参数会把页面参数类型从默认的multipart/form-data改为appli ...

  4. Linux系统登录:本地登录与远程登录

    安装登录系统的位置可以将登录方式分为两种:本地登录和远程登录.本地登录可以使用图形界面和命令行模式(也称字符界面)两种方式:远程登录可以使用SSH.Telnent.VNC.SFTP 4种方式. 常见的 ...

  5. Effective java读书札记第一条之 考虑用静态工厂方法取代构造器

    对于类而言,为了让client获取它自身的一个实例,最经常使用的方法就是提供一个共同拥有的构造器. 另一种放你发,也应该子每一个程序猿的工具箱中占有一席之地.类能够提供一个共同拥有的静态 工厂方法.它 ...

  6. 17-spring学习-AOP初步实现

    AOP是面向方面的编程,在实际开发中,AOP都会工作在业务层,因为业务层要调用数据层,而业务层也要完成所有辅助性的业务层操作. 范例:定义业务层操作接口: package com.Spring.Ser ...

  7. 心智图/思维导图(Mind Map/Mind Mapping),思维导图介绍

    心智图(Mind Map),又称脑图.心智地图.脑力激荡图.思维导图.灵感触发图.概念地图.树状图.树枝图或思维地图,是一种图像式思维的工具以及一种利用图像式思考辅助工具来表达思维的工具.   心智图 ...

  8. Coreseek安装测试配置指南(转)

    Sphinx--强大的开源全文检索引擎,Coreseek--免费开源的中文全文检索引擎 软件版本:coreseek-4.1 mmseg-3.2.14 autoconf-2.64 老版本的coresee ...

  9. [android开发之内容更新类APP]三、项目的基本功能之布局

    应用宝的下载地址:http://android.myapp.com/myapp/detail.htm?apkName=com.jov.laughter 其它的市场如木蚂蚁,安卓市场.搜狐也都有了 注: ...

  10. ItelliJ基于Gradle创建及发布Web项目(三)

    关键字:web 多模块 用惯了eclipse傻瓜式的配置,开始web部署真的不习惯. 一.现象: 项目发布了,死活找不到依赖模块中的类. 二.排查 确定F4->Artifacts->Out ...