요청 헤더 필드 Access-Control-Allow-Headers는 Access-Control-Allow-Headers에서 허용되지 않습니다.

게시 요청으로 파일을 서버로 보내려고하는데 파일을 보내면 오류가 발생합니다.

요청 헤더 필드 Content-Type은 Access-Control-Allow-Headers에서 허용되지 않습니다.

그래서 오류를 봤고 헤더를 추가했습니다.

$http.post($rootScope.URL, {params: arguments}, {headers: {
    "Access-Control-Allow-Origin" : "*",
    "Access-Control-Allow-Methods" : "GET,POST,PUT,DELETE,OPTIONS",
    "Access-Control-Allow-Headers": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
}

그런 다음 오류가 발생합니다.

요청 헤더 필드 Access-Control-Allow-Origin은 Access-Control-Allow-Headers에서 허용되지 않습니다.

그래서 나는 그것을 구글 검색했고 내가 찾을 수있는 유일한 비슷한 질문은 반 답변을 제공 한 다음 주제로 닫았습니다. 어떤 헤더를 추가 / 제거해야합니까?

POST 요청이 전송 된 서버 는 응답에Access-Control-Allow-Headers 헤더 등 을 포함해야합니다 . 고객의 요청에 넣는 것은 효과가 없습니다.

교차 출처 요청을 수락하고 Content-Type요청 헤더 등을 허용하도록 지정하는 것은 서버에 달려 있기 때문입니다 . 클라이언트는 주어진 서버가 CORS를 허용해야한다고 스스로 결정할 수 없습니다.

나는 같은 문제가 있었다. jQuery 설명서 에서 다음을 발견했습니다.

이외의 다른 콘텐츠 형식을 설정 크로스 도메인 요청을 위해 application/x-www-form-urlencoded, multipart/form-data또는 text/plain프리 플라이트 옵션은 서버에 요청 전송하는 브라우저를 트리거합니다.

따라서 서버는 교차 요청을 허용하지만 허용하지 않지만 Access-Control-Allow-Headers오류가 발생합니다. 기본적으로 각도 콘텐츠 유형은입니다 application/json. 이는 OPTION 요청을 보내려고합니다. 각도 기본 헤더를 덮어 쓰거나 Access-Control-Allow-Headers서버 끝을 허용하십시오 . 다음은 각도 샘플입니다.

$http.post(url, data, {
    headers : {
        'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
    }
});

그것이 누군가에게 도움이된다면 (이것은 dev 목적으로 만 허용해야하기 때문에 열악한 경우에도) 여기 동일한 문제가 발생했을 때 Java 솔루션입니다. [편집] 와일드 카드 *는 나쁜 해결책이므로 사용하지 마십시오. localhost실제로 로컬에서 작동하는 것이 필요한 경우 사용 하십시오.

public class SimpleCORSFilter implements Filter {

public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
    HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", "my-authorized-proxy-or-domain");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
    chain.doFilter(req, res);
}

public void init(FilterConfig filterConfig) {}

public void destroy() {}

}

POST 요청이 전송 된 서버 는 응답에 Content-Type 헤더 를 포함해야합니다 .

다음은 하나의 사용자 지정 "X_ACCESS_TOKEN"헤더를 포함하여 포함 할 일반적인 헤더 목록입니다.

"X-ACCESS_TOKEN", "Access-Control-Allow-Origin", "Authorization", "Origin", "x-requested-with", "Content-Type", "Content-Range", "Content-Disposition", "Content-Description"

이것이 귀하의 http 서버 사용자가 요청을 보내는 웹 서버에 대해 구성 해야하는 것입니다.

서버 담당자에게 "Content-Length"헤더를 노출하도록 요청할 수도 있습니다.

그는이를 CORS (Cross-Origin Resource Sharing) 요청으로 인식하고 해당 서버 구성의 의미를 이해해야합니다.

자세한 내용은 다음을 참조하십시오.

• http://www.w3.org/TR/cors/
• http://enable-cors.org/

다음과 같이 PHP에서 적절한 헤더를 활성화 할 수 있습니다 :

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, X-Requested-With");

다음은 nodejs에서 작동합니다.

xServer.use(function(req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", 'http://localhost:8080');
  res.setHeader('Access-Control-Allow-Methods', 'POST,GET,OPTIONS,PUT,DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type,Accept');

  next();
});

설정하려는 헤더 는 응답 헤더입니다. 응답하려는 서버에서 응답을 제공해야합니다.

그들은 클라이언트에 장소가 설정되어 있지 않습니다. 데이터를 소유 한 사이트 대신 권한 을 원하는 사이트에서 권한을 부여 할 수있는 경우 권한을 부여 할 수있는 방법이 의미가 없습니다 .

Express 서버에서이 문제가 발생하면 다음 미들웨어를 추가하십시오.

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

PC 또는 Mac의 크롬에서 ionic2 또는 angularjs 2에 대한 일부 자바 스크립트 요청을 테스트하는 경우 교차 출처를 허용하도록 크롬 브라우저 용 CORS 플러그인을 설치해야합니다.

mayba get 요청은 필요없이 작동하지만 post and puts and delete는 문제없이 진행되도록 테스트하기 위해 cors 플러그인을 설치해야합니다.

또한 json 응답이 일부 json 상태에 의해 400을 반환하지 않는지 확인하십시오

이것은 백엔드 문제입니다. 백엔드 변경 cors.js에서 항해 API를 사용하고 여기에 제출하면

module.exports.cors = {
  allRoutes: true,
  origin: '*',
  credentials: true,
  methods: 'GET, POST, PUT, DELETE, OPTIONS, HEAD',
  headers: 'Origin, X-Requested-With, Content-Type, Accept, Engaged-Auth-Token'
};

에서 ASP 닷넷 코어 , 신속하게 개발하기위한 작업을 진행하게; 에서 Startup.cs, Configure method추가

app.UseCors(options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());

필자의 경우 웹 서비스 메서드에 @HeaderParam과 같은 여러 매개 변수를 받고 있습니다.

이러한 매개 변수는 CORS 필터에서 다음과 같이 선언해야합니다.

@Provider
public class CORSFilter implements ContainerResponseFilter {

    @Override
    public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext) throws IOException {

        MultivaluedMap<String, Object> headers = responseContext.getHeaders();

        headers.add("Access-Control-Allow-Origin", "*");
        ...
        headers.add("Access-Control-Allow-Headers", 
        /*
         * name of the @HeaderParam("name") must be declared here (raw String):
         */
        "name", ...);
        headers.add("Access-Control-Allow-Credentials", "true");
        headers.add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");   
    }
}

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headerserror Access-Control-Allow-Origin는 HTTP 헤더의 필드가 응답에 의해 처리되거나 허용되지 않음을 의미합니다 . Access-Control-Allow-Origin요청 헤더에서 필드를 제거하십시오 .

localhost문제를 해결하기 위해 PHP를 사용 하고이를 설정 한 경우 :

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Content-Type'); 

프론트 엔드 사용에서 :

{headers: {"Content-Type": "application/json"}}

더 이상 문제가 없습니다 localhost!