cors 问题

Question

我正在使用 Ionic Angular 开发一个应用程序，它有前面（localhost 8100）和后面（localhost 3700），但是当我尝试进行提取以从数据库中获取一些项目时，我收到一条错误：

“跨域请求被阻止：同源策略不允许 读取远程资源 https://localhost:3700/api/productid/1。 （原因：CORS 请求失败。）状态代码：（空）。”

问题是我已经安装了cors包，然后我通过以下方式导入了它

var cors = require('cors')

和

app.use(cors());

，所以我真的不明白还能做什么

var express = require('express');
var cors = require('cors') //cors
var app = express();
app.use(cors());

也尝试过：

app.use(
  cors({
    allowedHeaders: ["authorization", "Content-Type"], // you can change the headers
    exposedHeaders: ["authorization"], // you can change the headers
    origin: "*",
    methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
    preflightContinue: false
  });
);

还有我的 Angular 服务（前面）：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ProductosService {

  private urlApi = 'https://localhost:3700/api/productoid/1';

  constructor(private http: HttpClient) { }

  public getData() : Observable<any>{
    return this.http.get<any>(this.urlApi);
  }

}

import { Component, OnInit } from '@angular/core';
import { ProductosService } from '../services/productos.service';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page implements OnInit {

  data: any[] = [];

  constructor(private productosService: ProductosService) {}

  ngOnInit(): void {
    this.llenarData();
  }

  llenarData(){
    this.productosService.getData().subscribe(data => 
      {this.data = data;
      console.log(this.data)

    })
  }

  

}

使用过多种浏览器（Firefox、Chrome、Edge、Opera）。

正如预期的那样，当我尝试使用邮递员调用后端时，我得到了正确的响应。

Answer 1

发送请求时（在 Angular 端），尝试将

Content-Type

设置为

application/x-www-form-urlencoded

。