Angular跨域问题：前后端解决办法

最近在学习Angular2，前端用HttpClient从后端取数据时遇到CORS跨域问题,然后在网上找到了两种可行的解决方案：一种是在前端配置代理，一种是在后端springboot中配置。两种配置任选一个即可解决问题。

参考文章：

前端解决方案

在项目根目录下新建proxy.conf.json文件，代码如下，这里有一个大坑：

{
"/api":{
    "target":"http://localhost:8080/back",
    "secure":false,
    "logLevel":"debug",
    "changeOrigin":true,
    "pathRewrite":{
    "^/api":""
        }
    }
}

刚开始在网上找前端跨域解决办法，很多文章都是说配置proxy.conf.json，但是给出的配置内容中都没有上面的changeOrigin或者pathRewrite,配置总是不起作用。当然，这可能也和我用的angular版本有关系，我在项目路径中打开cmd，输入ng version,显示我的项目angular版本是Angular: 10.0.4

然后在angular.json中加载配置proxy.config.json:

 "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "my-app:build",
            "proxyConfig":"proxy.conf.json" //主要就是加这一行
          },

之后在相应的service中使用HttpClient请求：

heroUrl: string = "api"+"/hero/";

constructor(
    private http: HttpClient
) {}

getHeroes(): Observable<Hero[]> {
    return this.http.get<Hero[]>(this.heroUrl);
}

这里调用的后端项目接口为：

http://localhost:8080/back/hero
get方式获得所有hero的信息
其中，back是项目路径，可以在application.properties中配置：
server.servlet.context-path=/back

另外一种配置proxy.conf.json的地方：package.json文件中

"scripts": {"start": "ng serve --proxy-config proxy.conf.json -o"}
启动项目以npm run start 命令就可以

后端解决方案

springboot增加一个全局配置，代码如下：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CORSConfig {

    @Bean
    public WebMvcConfigurer corsConfigurer(){
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedHeaders("*")
                        .allowedMethods("*")
                        .allowedOrigins("*");
            }
        };
    }
}

后端另外还找得到一种使用过滤器的办法，但是前端PUT请求调用后端接口时不起作用了，暂时不清楚原因，原文地址：跨域问题(CORS / Access-Control-Allow-Origin)

最后编辑于：2020.07.24 13:10:03