Контроль доступа Разрешить возникновение проблемы в Angular 2

Question

У меня возникла проблема с получением данных с моего сервера node.js.

сторона клиента:

public getTestLines() : Observable<TestLine[]> { 
    let headers = new Headers({ 'Access-Control-Allow-Origin': '*' }); 
    let options = new RequestOptions({ headers: headers }); 

    return this.http.get('http://localhost:3003/get_testlines', options) 
       .map((res:Response) => res.json()) 
       .catch((error:any) => Observable.throw(error.json().error || 'Server error')); 
} 

в стороне сервера Я также установил заголовки:

resp.setHeader('Access-Control-Allow-Origin','*') 
resp.send(JSON.stringify(results)) 

Но я получаю сообщение об ошибке

«XMLHttpRequest не может загрузить http://localhost:3003/get_testlines . Ответ на предполетный запрос не проходит проверку контроля доступа: НетНа запрошенном ресурсе присутствует заголовок «Access-Control-Allow-Origin». Происхождение «http://localhost:3000», следовательно, не имеет право доступа.»

Как я могу это исправить? Когда я удалить заголовки он говорит, что требуется этот заголовок.

Answer 1

Access-Control-Allow-Origin является ответа заголовок, а не заголовок запроса.

Вам нужно, чтобы оно отображалось в ответе, а не в запросе.

Вы попытались поставить его на ответ:

resp.setHeader('Access-Control-Allow-Origin','*') 

... но это не сработало.

Возможно, это связано с тем, что вы не поставили ответ на правильный запрос. Сообщение об ошибке говорит:

Ответ на предполетной запрос не проходит проверку контроля доступа

вы сделали что-то сделать запрос preflighted. Это означает, что перед тем, как браузер сделает запрос GET, который вы пытаетесь сделать, он делает запрос OPTIONS.

Это, по-видимому, обрабатывается другим кодом на вашем сервере, поэтому линия resp.setHeader('Access-Control-Allow-Origin','*') не попадает.

Одной вещью, которая вызывает предполетный запрос, является добавление заголовков запросов (кроме небольшого количества исключений). Добавление Access-Control-Allow-Origin к запросу вызовет предполетный запрос, поэтому первое, что нужно сделать, чтобы исправить эту проблему, - удалить Access-Control-Allow-Origin с запросом.

Если это не удается, вам необходимо настроить сервер, чтобы он мог отвечать на запрос OPTIONS, а также запрос GET.

Answer 2

Не устанавливайте Access-Control-Allow-Origin по запросу, его никогда не нужно. вы должны перепроверить, если заголовок присутствует на ответ (проверить это в консоли разработчика). было бы полезно, если бы вы поделились больше коды серверной.

Answer 3

Access-Control-Allow-Origin является заголовком ответа, не запроса заголовка вам нужно исправить разрешение в вашем внутреннем интерфейсе. поэтому вы должны создать файл cors.js, содержащий все необходимые разрешения.

function crosPermission(){ 
    this.permission=function(req,res,next){ 
    res.header('Access-Control-Allow-Origin','*'); 
    res.header('Access-Control-Allow-Headers','Content-Type'); 
    res.header('Access-Control-Allow-Methods','GET','POST','PUT','DELETE','OPTIONS'); 
    next(); 
    } 
} 

module.exports= new crosPermission(); 

следующий шаг Вам нужно добавить строку в ваших app.js

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

Answer 4

Если это будет отдых API =>http://localhost:3003/get_testlines

затем использовать @CrossOrigin (origins = "*") для решения проблемы перекрестного домена

Answer 5

Вы можете установить в заголовке php как,

header("Access-Control-Allow-Origin: *"); 
header("Content-Type: application/json; charset=UTF-8");