Vuex Axios CORS 블록Access-control-allow-origin

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을 위해 머리글을 쓰다.OPTIONSmethod도 마찬가지입니다(개요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