반응형
Vuex Axios CORS 블록Access-control-allow-origin
에러는 다음과 같습니다.
그래서 백엔드 API가 확실하게 전송되도록 합니다.acess-control-allow-origin
헤더:
이건 내 거야axios
코드:
loadTopSales ({ commit }) {
axios
.get('http://tms.test/api/top-sales', {
headers: {
'Access-Control-Allow-Origin': '*',
Accept: 'application/json',
Authorization: 'Bearer ' + this.state.token,
withCredentials: true
}
})
.then(items => {
commit('SET_TOP_SALES', items)
console.log(items)
})
.catch(err => {
console.log(err)
})
}
제발 도와주세요.스택오버플로우에서 모든 질문을 해봤는데
확인.curl -v -x options
백엔드 세트헤더
public function handle($request, Closure $next)
{
$headers = [
'Access-Control-Allow-Origin' => '*',
'Access-Control-Allow-Methods' => 'PUT,POST,GET,OPTIONS,ORIGIN',
'Access-Control-Allow-Headers' => 'Accept,Authorization,Content-Type,Origin,X-Auth-Token',
'Access-Control-Allow-Credentials' => 'true',
];
if ($request->getMethod() === "OPTIONS") {
// The client-side application can set only headers allowed in Access-Control-Allow-Headers
return Response::make('OK', 200, $headers);
}
$response = $next($request);
foreach ($headers as $key => $value){
$response->header($key, $value);
}
return $response;
}
이 답변은 IIS에서 CORS를 설정하는 것입니다.
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept,Authorization" />
<add name="Access-Control-Allow-Methods" value="GET, PUT, POST, HEAD, OPTIONS" />
<add name="Access-Control-Allow-Credentials" value="true" />
</customHeaders>
</httpProtocol>
API는 CORS 비행 전 요청을 처리하지 않는 것 같습니다.그것은 돌아올 것이다.Access-Control-Allow-Origin
을 위해 머리글을 쓰다.OPTIONS
method도 마찬가지입니다(개요Access-Control-Allow-Methods
)와 함께204 No Content
.
에서 확인할 수 있습니다.curl -v -X OPTIONS http://tms.test/api/top-sale
.
http-proxy-middleware를 사용하여 API용 프록시를 추가할 수 있습니다.이 기능은 로컬 개발에만 적용됩니다.
여기서 http-proxy-middleware를 사용하기 위한 사용자 가이드를 얻을 수 있습니다.
vueJ 고유의 사용법에 대해서는, https://forum.vuejs.org/t/vue-cli-3-how-to-properly-use-http-proxy-middleware/33723 를 사용해 주세요.
언급URL : https://stackoverflow.com/questions/59518596/vuex-axios-cors-block-acess-control-allow-origin
반응형
'programing' 카테고리의 다른 글
왜 CSS는 'npm run dev'와 'npm run build'를 다르게 렌더링합니까? (0) | 2022.08.16 |
---|---|
(노드:72332) 미처리 약속RejectWarning: 오류: 인수를 직렬화하지 못했습니다. (0) | 2022.08.16 |
클래스 경로란 무엇이며 어떻게 설정해야 합니까? (0) | 2022.08.16 |
rand()의 유용성 - 또는 누가 srand()를 호출해야 합니까? (0) | 2022.08.16 |
JVM의 최대 메모리 사용량을 설정하는 방법 (0) | 2022.08.13 |