Javascript 否'；访问控制允许原点'；带有ExpressJS的头指向本地服务器

我知道这个问题似乎已经被回答了很多次，但我真的不明白

• 我有一个本地的angular fullstack应用程序（Express，NodeJs），它有他的 服务器A（本地主机：9000/）
• 我有另一个本地前端应用程序B（已完成） 发电机吸气角度（本地主机：3000/）

我的服务器A是使用Express和Nodejs自动生成的：

  app.use(function (req, res, next) {

    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
    res.setHeader('Access-Control-Allow-Credentials', false);
    next();
});

在我的应用程序B中，对我的serveur a API的GET请求起作用

$http.get('http://localhost:9000/api/shows')

但有一个PUT请求：

$http.put('http://localhost:9000/api/shows/1', object)

我有以下错误：

无法加载XMLHttpRequest。不 “Access Control Allow Origin”标头出现在请求的服务器上 资源。因此，不允许使用源“” 通道响应的HTTP状态代码为403

我尝试：

  $http({
    method: "PUT",
    url:'http://localhost:9000/api/shows/1',
    headers: {
      'Content-type': 'application/json'
    },
    data:object
  });

res.header('Access-Control-Allow-Origin', '*');

不起作用,

我尝试：

  $http({
    method: "PUT",
    url:'http://localhost:9000/api/shows/1',
    headers: {
      'Content-type': 'application/json'
    },
    data:object
  });

res.header('Access-Control-Allow-Origin', '*');

不起作用,

我已经为chrome安装了*ExtensionAllow控件Allow Origin:*，但没有执行任何操作（只返回403错误（禁止）

我真的不知道为什么当PUT与GET一起工作时，它不适用于PUT

你已经有这个问题了吗？谢谢

更新：1我的浏览器中的结果： 用于获取

General:
Request URL:http://localhost:9000/api/shows/1
Request Method:OPTIONS
Status Code:200 OK

Request header:
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4,de-DE;q=0.2,de;q=0.2
Access-Control-Request-Headers:content-type
Access-Control-Request-Method:PUT
Connection:keep-alive
Host:localhost:9000
Origin:http://localhost:3000
Referer:http://localhost:3000/

Response header: 
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:X-Requested-With,content-type
Access-Control-Allow-Methods:GET, POST, OPTIONS, PUT, PATCH, DELETE
Access-Control-Allow-Origin:http://localhost:3000
Allow:GET,HEAD,PUT,PATCH,DELETE
Connection:keep-alive
Content-Length:25
Content-Type:text/html; charset=utf-8

对于PUT请求：

general:
Request URL:http://localhost:9000/api/shows/1
Request Method:PUT
Status Code:403 Forbidden

Response Header:
Connection:keep-alive
Content-Encoding:gzip
Content-Type:application/json; charset=utf-8
Date:Thu, 25 Aug 2016 16:29:44 GMT
set-cookie:connect.sid=s%3AsVwxxbO-rwLH-1IBZdFzZK1xTStkDUdw.xuvw41CVkFCRK2lHNlowAP9vYMUwoRfHtc4KiLqwlJk; Path=/; HttpOnly
set-cookie:XSRF-TOKEN=toaMLibU5zWu2CK19Dfi5W0k4k%2Fz7PYY%2B9Yeo%3D; Path=/
Strict-Transport-Security:max-age=31536000; includeSubDomains; preload

Request header:
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4,de-DE;q=0.2,de;q=0.2
Connection:keep-alive
Content-Length:27
Content-Type:application/json
Host:localhost:9000
Origin:http://localhost:3000
Referer:http://localhost:3000/

Request Payload:
{url_name: "myData"}
url_name
:
"myData"

谢谢你的帮助

更新2:与@Chris Foster的合作和工作 我已经安装了npm cors——保存 在我的app.js中， 我现在有以下代码：

import express from 'express'; 
import cors from 'cors'; 

var app = express()

var corsOptions = {
  origin: 'http://localhost:3000'
}
var issuesoption = {
  origin: true,
  methods: ['PUT'],
  credentials: true,
};


app.use(cors(corsOptions))
app.options('*', cors(issuesoption));
app.put('/api/shows/:id',cors(issuesoption) ,function(req,res){
  res.json({
    data: 'Issue #2 is fixed.'
  });
});

这仍然不适用于：

$http.put("http://localhost:9000/api/shows/1",object)

但是我没有任何403错误，我现在有

Request URL:http://localhost:9000/api/shows/1
Request Method:PUT
Status Code:200 OK

但是不会将数据放入服务器，我在预览中有：

{data: "Issue #2 is fixed."}

---

当您发出可以更改某些内容的请求（

POST

、

PUT

等）时，CORS规则要求浏览器在发出实际请求之前进行（

选项

）

在Node中，您必须专门处理这些

选项

请求。很可能您只处理

PUT

（

app.PUT（'/etc/etc/）

），而飞行前请求失败

您需要为飞行前

选项

请求提供帮助，但最好查看软件包，它使这一切变得更加简单，并为您提供：

const express = require('express')
const cors = require('cors')

const app = express()

const corsOptions = {
  origin: 'http://example.com'
}

app.use(cors(corsOptions))

---

当您发出可以更改某些内容的请求（

POST

、

PUT

等）时，CORS规则要求浏览器在发出实际请求之前进行（

选项

）

在Node中，您必须专门处理这些

选项

请求。很可能您只处理

PUT

（

app.PUT（'/etc/etc/）

），而飞行前请求失败

您需要为飞行前

选项

请求提供帮助，但最好查看软件包，它使这一切变得更加简单，并为您提供：

const express = require('express')
const cors = require('cors')

const app = express()

const corsOptions = {
  origin: 'http://example.com'
}

app.use(cors(corsOptions))

---

您是否在插件（google chrome扩展）中启用了cors？是的，启用跨源资源共享为真，当它被激活时，我只有错误：403（禁止）您尝试重新启动浏览器了吗？您是否可以包括在浏览器的网络开发工具中捕获的PUT请求和GET请求的请求头的完整列表？@Wandrille好的，因此如果没有实际的POST请求，则它在飞行前请求中失败。请确保您的服务器也为飞行前发送适当的头。（GET不需要飞行前请求。）您可能对我关于插件（google chrome扩展）中是否启用cors的回答感兴趣？是的，启用跨源资源共享是真的，当它被激活时，我只有错误：403（禁止）您尝试重新启动浏览器了吗？您是否可以包括在浏览器的网络开发工具中捕获的PUT请求和GET请求的请求头的完整列表？@Wandrille好的，因此如果没有实际的POST请求，则它在飞行前请求中失败。请确保您的服务器也为飞行前发送适当的头。（GET不需要飞行前请求。）您可能对我在@Wandrille上的回答感兴趣。此代码实际上解决了您的问题，您现在看到

200 OK

表示请求有效：）您在预览中看到的JSON正是路由的设计目的：将JSON发送到客户端。它对您发送的数据没有任何作用，因为您尚未对路由进行编码以执行任何操作。要“将数据放入服务器”正如您所提到的，这是一个不同的问题。您必须使用

req.body

和

bodyParser

中间件在路由处理程序中处理客户端发送给您的数据，如中所述。如果您在此之后需要更多帮助，您应该打开一个新问题，因为它与CORS问题无关。祝您好运！我已经尝试过了只有你的代码，但我一直有问题。谢谢：）让我们来看看。确保您在创建express app后立即添加此中间件，然后再添加其他中间件。在我这样做之前，此中间件最初对我不起作用。@Wandrille此代码确实解决了您的问题，您现在看到一个

200 OK

表示请求有效：）您在预览中看到的JSON正是路由的设计目的：将JSON发送到客户端。它对您发送的数据没有任何作用，因为您还没有对路由进行编码以执行任何操作。要像您提到的那样“将数据放入服务器”，这是另一个问题。您必须使用中提到的

req.body

和

bodyParser

中间件处理客户端在路由处理程序中发送给您的数据。如果你在那之后需要更多的帮助，你应该提出一个新的问题，因为它与CORS问题无关。祝你好运我只尝试了你的代码，但我一直有问题。谢谢：）让我们来看看。确保您在创建express应用程序后立即添加此中间件，然后再添加其他中间件，在我这样做之前，它最初对我不起作用。