Postman调用接口正常，前端页面调用报跨域-Toy模板网

这篇具有很好参考价值的文章主要介绍了Postman调用接口正常，前端页面调用报跨域。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

背景：

（该接口为POST接口）配置了跨域，并自定义了一个拦截器，拦截器写了根据自定义注解放行接口的代码，结果前端报跨域，后端也没放行接口。

解决办法：

一、配置CorsFilter

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

import java.util.Arrays;

@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter(){

    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
      CorsConfiguration config = new CorsConfiguration();
      // 允许发送Cookie
      config.setAllowCredentials(true);
      // 允许所有来源的请求
      config.addAllowedOriginPattern("*");
      // 允许所有的请求头字段
      config.addAllowedHeader("*");
      // 允许所有的请求方法（GET, POST, PUT, DELETE等）
      config.addAllowedMethod("*");
      // 对所有的路径都应用跨域配置
      source.registerCorsConfiguration("/**", config);
      // 创建并返回一个跨域过滤器实例
      return new CorsFilter(source);
    }

}

注：AllowCredentials设置为true后，无法和设置为*的AllowedOrigin一起使用，且AllowedOriginPatterns也无法直接设置为*，所以这里我使用的addAllowedOriginPattern("*")

二、配置放行接口

2.1、根据放行该接口（这样写的话跨域问题实际并没有解决，只是配置了放行的接口没问题）

2.2、由于POST接口，在实际调用前会有一个预调用（OPTIONS类型），该调用正常响应才会实际调接口，所以可以设置OPTIONS类型的接口放行也可以（这个没试过不清楚有没有效，推荐还是配置CorsFilter，配置完CorsFilter后可以不用配置addCorsMapping）

文章来源地址https://www.toymoban.com/news/detail-755038.html

到了这里，关于Postman调用接口正常，前端页面调用报跨域的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！