带有代理重定向的角度应用程序上的错误 404

Question

我正在开发一个有角度的弹簧启动应用程序。

我提出以下要求

  getListProduitImmobilierDTO(pagesize: number, page: number, search: Search): Observable<ProduitImmobilierDTO[]> {
    const headerDict = {
      'Content-Type': 'application/json',
      Accept: 'application/json',
      'Accept-Charset': 'charset=UTF-8',
      'Access-Control-Allow-Headers': 'Content-Type'
    };

    const requestOptions = {
      headers: new HttpHeaders(headerDict)
    };
    return this.http.get('/api/produitimmobilier/all/' + pagesize + '/' + page, requestOptions).pipe(map((jsonArray: any) =>jsonArray.map((jsonItem) => ProduitImmobilierDTO.fromJson(jsonItem))));

我使用 proxy.config.json 重定向请求，如下所示

{
  "/api/*": {

    "target":  {
       "host": "localhost",
       "protocol": "http:",
       "port": 8080
     },
    "secure": false,
     "changeOrigin": true,
     "logLevel": "info"
  }
}

为了启动 Angular 应用程序，我使用以下命令

ng serve --proxy-config proxy.config.json

在服务器端，我有以下 spring boot 控制器：

@CrossOrigin(origins = "http://localhost:4200", maxAge = 3600)
@RestController
@RequestMapping({"/api"})
public class ProduitImmobilierController {

    Logger logger = LoggerFactory.getLogger(ProduitImmobilierController.class);

    @Autowired
    private ProduitImmobilierService produitImmobilierService;

    @RequestMapping(value = "/produitimmobilier/all/{pageSize}/{page}",
    method = RequestMethod.GET,
    produces = {"text/plain;charset=UTF-8", MediaType.APPLICATION_JSON_VALUE},
    consumes = {"text/plain;charset=UTF-8", MediaType.APPLICATION_JSON_VALUE})
    public @ResponseBody List<ProduitImmobilierDTO> findAll(@PathVariable("pageSize") int pageSize, @PathVariable("page") int page){
        logger.info("CONTROLLER PRODUITIMMOBILIERSERVICE CA PASSE");
        return produitImmobilierService.findAll(pageSize, page);
    }

它曾经工作过。我尝试修改请求，但在反转后，它不再起作用了。我有以下错误

An attempt to set a forbidden header has been blocked : Accept-Charset http.js:2346
Object { headers: {…}, status: 404, statusText: "Not Found", url: "http://localhost:4200/api/produitimmobilier/all/5/1", ok: false, name: "HttpErrorResponse", message: "Http failure response for http://localhost:4200/api/produitimmobilier/all/5/1: 404 Not Found", error: {…} }

你能帮我吗

Answer 1

使用Angular dev-server proxy 时，不应在服务器上配置CrossOrigin，因为Angular dev-server proxy 只是在前端应用程序运行的同一个域+端口上接收浏览器请求，然后将该请求转发到后端API服务器，在您的情况下，对端口 4200 的所有请求都转发到端口 8080。

您正在尝试设置 'Accept-Charset' 标头，但根据 MDN 'Accept-Charset' 标头是Forbidden header name（禁止标头名称是任何不能以编程方式修改的 HTTP 标头的名称）

在任何情况下，您都不应该使用 'Accept-Charset' 标头，因为 UTF-8 现在得到了很好的支持并且是首选的字符编码。为了通过较少的基于配置的熵来保证更好的隐私，所有浏览器都省略了 Accept-Charset 标头：Internet Explorer 8+、Safari 5+、Opera 11+、Firefox 10+ 和 Chrome 27+ 不再发送它。