Reactjs 反应JS上的CORS 403

*************************解决方案******************************

0。-加入你的POM

 <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-security</artifactId>
 </dependency>

2.-在您的corscoConfiguration.java上

    @Configuration
@EnableWebMvc
public class CorsConfiguration implements WebMvcConfigurer
{
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedMethods("GET", "POST", "PUT", "DELETE");
    }

    @Bean
    public WebMvcConfigurer corsConfigurer() 
    {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**").allowedOrigins("http://YOURSPRINGSERVER:PORT", "http://YOURFRONT/REACT/WHATEVERSERVER:PORT");
            }
        };
    }

注意：在这里，它将允许访问任何注册的前端服务器，这些服务器从根URI和所有动词方法（“GET”、“POST”、“PUT”、“DELETE”）进行查询

3.-在您的CorsFilter.java上

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse 
        servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        HttpServletRequest request= (HttpServletRequest) servletRequest;

        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", 
        "GET,POST,DELETE,PUT,OPTIONS");
        response.setHeader("Access-Control-Allow-Headers", "*");
        response.setHeader("Access-Control-Allow-Credentials", true);
        response.setHeader("Access-Control-Max-Age", 180);
        filterChain.doFilter(servletRequest, servletResponse);
       }

注意：这个类定义了控制器的html头的响应

4.-最后在你的网络安全配置课上

        @Configuration
    @EnableWebSecurity
    @EnableGlobalMethodSecurity(prePostEnabled = true)
    public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
    @Autowired
        public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {

        }

        @Bean
        public PasswordEncoder passwordEncoder() {
            return new BCryptPasswordEncoder();
        }

        @Bean
        CorsFilter corsFilter() {
            CorsFilter filter = new CorsFilter();
            return filter;
        }

        @Override
        protected void configure(HttpSecurity httpSecurity) throws Exception {      
            httpSecurity
            .addFilterBefore(corsFilter(), SessionManagementFilter.class) 
            .csrf().disable()
            .authorizeRequests()
            .antMatchers("/raps/**").permitAll();
        }}

准备好了，前面的所有查询都将被接受，您还可以添加一些令牌作为JWT，不会出现问题

---

我有以下问题，现在我正在使用React+Axios登录进行培训，但是当我尝试登录后方法时，出现以下错误：

铬合金控制台

OPTIONS http://localhost:8081/usuario/auth 403

Access to XMLHttpRequest at 'http://localhost:8081/usuario/auth' from origin 'http://localhost:3000' 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.

Ajax方法

handleLogin(e) {
    e.preventDefault();
    console.log(this.state)
    axios.post(`http://localhost:8081/usuario/auth`, this.state )
      .then(res => {
        console.log(res);
        console.log(res.data);
      })

    this.props.onAddUser(this.state);
  }

package com.raps.controller;

import...

@RestController
@CommonsLog
@CrossOrigin
@RequestMapping(value = "/raps/usuario", produces = MediaType.APPLICATION_JSON_VALUE)
public class UsuarioController {

    @Autowired
    private UsuarioService uService; 

    @GetMapping
    public Iterable<Usuario> getAll(){... thats work ...}

    @GetMapping("/{id}")
    public Optional<Usuario> getById(@PathVariable int id) {... thats work ...}

    @PostMapping("/auth")
    public Optional<Usuario> auth(@RequestBody Usuario usuario) {
        log.info("Controller");
        return uService.auth(usuario);
    }

}

请求头

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: es-CL,es-US;q=0.9,es;q=0.8,en-US;q=0.7,en;q=0.6,es-419;q=0.5
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Connection: keep-alive
Host: localhost:8081
Origin: http://localhost:3000
Referer: http://localhost:3000/
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.79 Safari/537.36

**React上的对象**

{电子邮件：manuel@gmail.com，密码：“ghgg1255”}

后端

handleLogin(e) {
    e.preventDefault();
    console.log(this.state)
    axios.post(`http://localhost:8081/usuario/auth`, this.state )
      .then(res => {
        console.log(res);
        console.log(res.data);
      })

    this.props.onAddUser(this.state);
  }

package com.raps.controller;

import...

@RestController
@CommonsLog
@CrossOrigin
@RequestMapping(value = "/raps/usuario", produces = MediaType.APPLICATION_JSON_VALUE)
public class UsuarioController {

    @Autowired
    private UsuarioService uService; 

    @GetMapping
    public Iterable<Usuario> getAll(){... thats work ...}

    @GetMapping("/{id}")
    public Optional<Usuario> getById(@PathVariable int id) {... thats work ...}

    @PostMapping("/auth")
    public Optional<Usuario> auth(@RequestBody Usuario usuario) {
        log.info("Controller");
        return uService.auth(usuario);
    }

}

package com.raps.controller；
导入。。。
@RestController
@公共日志
@交叉起源
@RequestMapping（value=“/raps/usuario”，products=MediaType.APPLICATION\u JSON\u value）
公共类用户控制器{
@自动连线
私人用户服务；
@GetMapping
公共Iterable getAll（）{…这是工作…}
@GetMapping（“/{id}”）
公共可选getById（@PathVariable int-id）{…这是工作…}
@后映射（“/auth”）
公共可选身份验证（@RequestBody Usuario Usuario）{
日志信息（“控制器”）；
返回uService.auth（usuario）；
}
}

我已经读过关于这个问题的起源，但是用post方法解决它是不可能的。我请求您在这方面给予帮助和指导

---

git代码：

打开您的package.json

添加一个属性，该属性读取

"proxy":"localhost8081"

更改所有post请求以删除localhost8081部分，这样它们就可以

axios.post("/usuario/auth",this.state)

---

React-dev服务器现在将欺骗您的地址，使其与后端地址相同（仅在开发模式下可能——现代web浏览器太聪明了，无法在已部署的链接上实现），并应使您能够绕过CORS错误。如果这不起作用，请将代理更改为您的IP地址。

您需要添加CORS筛选器以允许跨源请求。下面是一个允许所有方法和头的示例，您可以指定允许的方法和头，而不是允许所有方法和头

@CrossOrigin
public class CorsFilter extends OncePerRequestFilter{

@Override
protected void doFilterInternal(final HttpServletRequest request, final HttpServletResponse response, final FilterChain filterChain) throws ServletException, IOException {
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods","*");
        response.setHeader("Access-Control-Allow-Headers","*");
 filterChain.doFilter(request, response);
    }
}

---

更改.Json，现在在进行查询时不要使用url“http://localhost:3000/user/auth”，它会在端口中抛出一个404。我认为您的响应中有一两个输入错误，现在我很难阅读它。你有没有办法编辑一下，让我看得更清楚一点？我不完全确定你做了什么以及正在发生什么。在我的项目中研究你的解决方案没有中间件/安全层。因此，添加Spring安全性和@EnableWebSecurity会激活查询“*”``