出现问题是因为你在前端添加了以下代码作为请求头:

headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
headers.append('Access-Control-Allow-Credentials', 'true');

这些头属于响应，而不是请求。所以去掉它们，包括这一行:

headers.append('GET', 'POST', 'OPTIONS');

你的请求有“Content-Type: application/json”，因此触发了所谓的CORS preflight。这导致浏览器使用OPTIONS方法发送请求。详细信息请参见CORS飞行前准备。

因此，在你的后端，你必须通过返回响应头来处理这个预飞行的请求，其中包括:

Access-Control-Allow-Origin : http://localhost:3000
Access-Control-Allow-Credentials : true
Access-Control-Allow-Methods : GET, POST, OPTIONS
Access-Control-Allow-Headers : Origin, Content-Type, Accept

当然，实际的语法取决于后端使用的编程语言。

在你的前端，它应该像这样:

function performSignIn() {
    let headers = new Headers();

    headers.append('Content-Type', 'application/json');
    headers.append('Accept', 'application/json');
    headers.append('Authorization', 'Basic ' + base64.encode(username + ":" +  password));
    headers.append('Origin','http://localhost:3000');

    fetch(sign_in, {
        mode: 'cors',
        credentials: 'include',
        method: 'POST',
        headers: headers
    })
    .then(response => response.json())
    .then(json => console.log(json))
    .catch(error => console.log('Authorization failed: ' + error.message));
}

使用下面的npm模块。这实际上挽救了生命。

https://www.npmjs.com/package/local-cors-proxy

您将得到一个CORS错误，例如下面的URL

https://www.google.co.in/search/list

在成功安装(local-cors-proxy)后，global npm install -g local-cors-proxy并设置代理URL。 例如，下面的CORS问题进入localhost。因此，需要为CORS问题域添加域名(https://www.google.co.in)和端口(——port 8010)。 欲了解更多，请查看链接 https://www.npmjs.com/package/local-cors-proxy

lcp --proxyUrl https://www.google.co.in --port 8010

设置成功后，它将生成如下所示的本地代理URL。

http://localhost:8010/proxy

在项目API URL中使用该域名。

API完整URL:

http://localhost:8010/proxy/search/list

在您的本地项目中获得CORS问题响应。

当客户端从他的主机username.companyname.com调用我们的后端服务时，他常常得到上述错误

有两件事是必须的:

在发送回响应时，发送键为Access-Control-Allow-Origin且值为*的报头: context.Writer.Header()["Access-Control-Allow-Origin"] = []string{"*"} //避免CORS错误 使用Go CORS库将AllowCredentials设置为false, AllowAllOrigins设置为true。

在我的例子中，我使用下面的解决方案。

前端还是角

post(
    this.serverUrl, dataObjToPost,
    {
      headers: new HttpHeaders({
           'Content-Type':  'application/json',
         })
    }
)

后端(我使用PHP)

header("Access-Control-Allow-Origin: http://localhost:4200");
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header("Access-Control-Allow-Headers: Content-Type, Authorization");

$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
print_r($request);

使用dataType: 'jsonp'适合我。

   async function get_ajax_data(){
       var _reprojected_lat_lng = await $.ajax({
                                type: 'GET',
                                dataType: 'jsonp',
                                data: {},
                                url: _reprojection_url,
                                error: function (jqXHR, textStatus, errorThrown) {
                                    console.log(jqXHR)
                                },
                                success: function (data) {
                                    console.log(data);

                                    // note: data is already json type, you
                                    //       just specify dataType: jsonp
                                    return data;
                                }
                            });


 } // function               

当客户端URL和服务器URL(包括端口号)不匹配时，会发生此错误。在这种情况下，您需要启用跨源资源共享的CORS服务。

如果您正在托管Spring REST服务，那么您可以在Spring框架中的CORS支持的博客文章中找到它。

如果你使用Node.js服务器托管服务，那么

停止Node.js服务器。 NPM安装cors—保存 将以下行添加到server.js中

const cors=require("cors");
const corsOptions ={
   origin:'*', 
   credentials:true,            //access-control-allow-credentials:true
   optionSuccessStatus:200,
}

app.use(cors(corsOptions)) // Use this after the variable declaration