一旦在Heroku中部署了Angular和SpringBoot应用程序，Cors Error就会

如何解决一旦在Heroku中部署了Angular和SpringBoot应用程序，Cors Error就会

由于该应用导致cors，我经历了非常困难的时期。在本地工作完美，但是一旦部署错误


Access to XMLHttpRequest at 'https://portafolioback.herokuapp.com/portafolio/version1/post/all' from origin 'https://frontportafolio.herokuapp.com' 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.

应用程序的两个部分（Front（角度）和Back（Spring-Boot））已经部署在heroku中，控制器前端的配置是这样的

import { EventEmitter,Injectable } from '@angular/core';
import { HttpClient,HttpHeaders } from '@angular/common/http';
import { BehaviorSubject } from 'rxjs';
import { map } from 'rxjs/operators';

const mongoUrl ='https://portafolioback.herokuapp.com/portafolio/version1/';

const myMail = 'https://mailthis.to/cubancoder@gmail.com';
let headersReq = new HttpHeaders({
  'Content-Type': 'application/json; charset=utf-8',});

@Injectable({
  providedIn: 'root',})
export class PostServicesService {
 
  constructor(private http: HttpClient) {}
  ...some code.....
  getAllPosts() {
    return this.http.get<any>(`${mongoUrl}post/all`,{ headers: headersReq });
  }
}

在我的后面，控制器看起来像这样：

@CrossOrigin(origins = "https://frontportafolio.herokuapp.com",maxAge = 3600)
@RestController
@RequestMapping("portafolio/version1")
public class PostController {

    @Autowired
    private PostRepository postRepository;

    @GetMapping("/post/all")
    public List<Post> getAllPost(){
        return postRepository.findAllComments();
    }
}

然后，由于CrossOrigin的此配置也无用，因此在我的应用程序文件中添加了这样的cors全局配置：

package com.portafolio.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@SpringBootApplication
public class DemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class,args);
    }

}

@Configuration
@EnableWebMvc
 class WebConfig implements Filter,WebMvcConfigurer {



    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**");
    }

    @Override
    public void doFilter(ServletRequest req,ServletResponse res,FilterChain chain) {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;
        System.out.println("WebConfig; "+request.getRequestURI());
        response.setHeader("Access-Control-Allow-Origin","https://frontportafolio.herokuapp.com");
        response.setHeader("Access-Control-Allow-Methods","POST,PUT,GET,OPTIONS,DELETE");
        response.setHeader("Access-Control-Allow-Headers","Content-Type,Access-Control-Allow-Headers,Authorization,X-Requested-With,observe");
        response.setHeader("Access-Control-Max-Age","3600");
        response.setHeader("Access-Control-Allow-Credentials","true");
        response.setHeader("Access-Control-Expose-Headers","Authorization");
        response.addheader("Access-Control-Expose-Headers","responseType");
        response.addheader("Access-Control-Expose-Headers","observe");
        System.out.println("Request Method: "+request.getmethod());
        if (!(request.getmethod().equalsIgnoreCase("OPTIONS"))) {
            try {
                chain.doFilter(req,res);
            } catch(Exception e) {
                e.printstacktrace();
            }
        } else {
            System.out.println("Pre-flight");
            response.setHeader("Access-Control-Allow-Origin","*");
            response.setHeader("Access-Control-Allow-Methods",DELETE,PUT");
            response.setHeader("Access-Control-Max-Age","3600");
            response.setHeader("Access-Control-Allow-Headers","Access-Control-Expose-Headers"+"Authorization,content-type," +
                    "USERID"+"ROLE"+
                    "access-control-request-headers,access-control-request-method,accept,origin,authorization,x-requested-with,responseType,observe");
            response.setStatus(HttpServletResponse.SC_OK);
        }

    }

}

但仍然保持相同的错误：

Access to XMLHttpRequest at 'https://portafolioback.herokuapp.com/portafolio/version1/post/all' from origin 'https://frontportafolio.herokuapp.com' 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.

请...在这种情况下的任何帮助将是惊人的！！提前谢谢！！！

解决方法

尝试允许凭证或

我在处理它时也遇到了同样的问题。Heroku仅会根据您的依赖来安装软件包而且我需要的是我的devDependencies，所以一旦我重新安装了依赖关系，它就可以工作了！

将此代码添加到 serve.js 喜欢：

app.use(function(req,res,next) {
    res.header("Access-Control-Allow-Origin",'*');
    res.header("Access-Control-Allow-Credentials",true);
    res.header('Access-Control-Allow-Methods','GET,PUT,POST,DELETE,OPTIONS');
    res.header("Access-Control-Allow-Headers",'Origin,X-Requested-With,Content-Type,Accept,content-type,application/json');
    next();
});

尝试在 service 文件中添加Access-Control-Allow-Methods

import { EventEmitter,Injectable } from '@angular/core';
import { HttpClient,HttpHeaders } from '@angular/common/http';
import { BehaviorSubject } from 'rxjs';
import { map } from 'rxjs/operators';

const mongoUrl 
  ='https://portafolioback.herokuapp.com/portafolio/version1/';
    

const myMail = 'https://mailthis.to/cubancoder@gmail.com';
let headersReq = new HttpHeaders({
  'Content-Type': 'application/json; charset=utf-8','Access-Control-Allow-Headers': 'Content-Type','Access-Control-Allow-Methods': 'GET','Access-Control-Allow-Origin': '*'
});

@Injectable({
  providedIn: 'root',})
export class PostServicesService {
 
  constructor(private http: HttpClient) {}
  ...some code.....
  getAllPosts() {
    return this.http.get<any>(`${mongoUrl}post/all`,{ headers: headersReq });
  }
}