CORS:当凭据标志为真时，不能在Access-Control-Allow-Origin中使用通配符

我有一个设置

前端服务器(Node.js，域:localhost:3000) <——>后端(Django, Ajax，域:localhost:8000)

浏览器<——webapp <——Node.js(服务应用程序)

浏览器(webapp) -> Ajax -> Django(服务Ajax POST请求)

现在，我在这里的问题是CORS设置，web应用程序使用它来对后端服务器进行Ajax调用。在chrome，我一直得到

当凭据标志为真时，不能在Access-Control-Allow-Origin中使用通配符。

也不能在firefox上工作。

我的Node.js设置是:

var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', 'http://localhost:8000/');
    res.header('Access-Control-Allow-Credentials', true);
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
};

在Django中，我使用了这个中间件

web应用程序发出这样的请求:

$.ajax({
    type: "POST",
    url: 'http://localhost:8000/blah',
    data: {},
    xhrFields: {
        withCredentials: true
    },
    crossDomain: true,
    dataType: 'json',
    success: successHandler
});

所以，webapp发送的请求头是这样的:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: "Origin, X-Requested-With, Content-Type, Accept"
Access-Control-Allow-Methods: 'GET,PUT,POST,DELETE'
Content-Type: application/json 
Accept: */*
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Cookie: csrftoken=***; sessionid="***"

下面是响应头:

Access-Control-Allow-Headers: Content-Type,*
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST,GET,OPTIONS,PUT,DELETE
Content-Type: application/json

我哪里说错了?!

编辑1:我一直在使用chrome—禁用web-security，但现在想让事情真正工作。

编辑2:答案:

django-cors-headers配置的解决方案:

CORS_ORIGIN_ALLOW_ALL = False
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = (
    'http://localhost:3000' # Here was the problem indeed and it has to be http://localhost:3000, not http://localhost:3000/
)

当前回答

angular有这个问题，在请求执行之前，使用一个认证拦截器来编辑头。我们使用api-token进行身份验证，所以我启用了凭据。现在，似乎没有必要/不允许了

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    req = req.clone({
      //withCredentials: true, //not needed anymore
      setHeaders: {
        'Content-Type' : 'application/json',
        'API-TOKEN' : 'xxx'
      },
    });
    
    return next.handle(req);
  }

除此之外，目前还没有副作用。

2020-06-30 12:49:45

其他回答

如果你想要允许所有的起源并保持真实的凭证，这对我来说是可行的:

app.use(cors({
  origin: function(origin, callback){
    return callback(null, true);
  },
  optionsSuccessStatus: 200,
  credentials: true
}));

2019-05-17 15:22:49

这是安全的一部分，你不能这么做。如果你想允许凭证，那么你的Access-Control-Allow-Origin不能使用*。您必须指定确切的协议+域+端口。参考以下问题:

访问控制-允许起源通配符子域，端口和协议使用凭证的跨起源资源共享

此外，*过于宽松，会阻碍凭证的使用。因此，将http://localhost:3000或http://localhost:8000设置为allow origin头文件。

2013-11-02 17:31:56

这对我来说在开发过程中是可行的，但我不能建议在制作过程中，这只是一种不同的完成工作的方式，虽然还没有提到，但可能不是最好的。总之是这样的:

您可以从请求中获取源，然后在响应头中使用它。下面是它在express中的样子:

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', req.header('origin') );
  next();
});

我不知道你的python设置会是什么样子，但这应该很容易翻译。

2019-08-26 09:57:27

angular有这个问题，在请求执行之前，使用一个认证拦截器来编辑头。我们使用api-token进行身份验证，所以我启用了凭据。现在，似乎没有必要/不允许了

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    req = req.clone({
      //withCredentials: true, //not needed anymore
      setHeaders: {
        'Content-Type' : 'application/json',
        'API-TOKEN' : 'xxx'
      },
    });
    
    return next.handle(req);
  }

除此之外，目前还没有副作用。

2020-06-30 12:49:45

试一试:

const cors = require('cors')

const corsOptions = {
    origin: 'http://localhost:4200',
    credentials: true,

}
app.use(cors(corsOptions));

2017-12-24 10:41:00

CORS:当凭据标志为真时，不能在Access-Control-Allow-Origin中使用通配符

推荐文章

最新文章

标签