常連

Vue.js初心者です。

axiosを使用して通信するところでエラーが出てしまいます。
```ここに言語を入力
Access to XMLHttpRequest at 'http://test.com/' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
```

調べると結構出てきたので、試してみましたが上手くいきませんでした。
自分の理解が低く、理解できないところもありました。
https://qiita.com/Ryoma0413/items/c41d10d2e6e2a420c3cf
https://qiita.com/att55/items/2154a8aad8bf1409db2b#simple-request-%E3%81%A8-preflight-request-%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6
https://b1tblog.com/2019/11/03/vue-axios/
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS
https://teratail.com/questions/140784

```vue
<script>
import axios from 'axios';

export default {
  data() {
    return {
      term: '',

    }
  },
  methods: {
    async exe() {
      this.$emit('loadStart')
      const headers = {'Access-Control-Allow-Origin': '*'}
      const { data } = await axios.get('//test.com/', {headers});
      this.$emit('loadComplete', { results: data.results})
    }
  }
}
</script>
```

試した事
```ここに言語を入力
import axios from 'axios';
axios.defaults.headers.get['Access-Control-Allow-Origin'] = '*'
```
vue.config.jsを作成して
https://qiita.com/Ryoma0413/items/c41d10d2e6e2a420c3cf
```ここに言語を入力
module.exports = {
  devServer: {
    proxy: {
      "/api/": {
        target: "http://localhost:8080",
      }
    }
  }
};

vueのファイル
/api/を追加
const headers = {'Access-Control-Allow-Origin': '*'}
const { data } = await axios.get('/api/test.com/', {headers});

↓
404 (Not Found)
設定がうまう行ってないのか
```
dataに設定してthis.で呼び出し
https://teratail.com/questions/140784
```ここに言語を入力
export default {
  data() {
    return {
      term: '',
      headers: {
        'Content-Type': 'application/json;charset=UTF-8',
        'Access-Control-Allow-Origin': '*',
      }
    }
  },
  methods: {
    async exe() {
      this.$emit('loadStart')
      const { data } = await axios.get('//test.com/', {headers: this.headers});
      this.$emit('loadComplete', { results: data.results})
    }
  }
}

↓

Access to XMLHttpRequest at test.com from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
```

```ここに言語を入力
web上のrequest headers
Access-Control-Allow-Origin: *の設定はされていました。
```

自分の力では解決する事ができませんでした。
どなたか知恵を貸していただきたいです。

よろしくお願いします。

vue/cli 4.3.1

Vue.jsでaxiosを使った通信でCORS policyで止められる

## エラー内容
TypeScriptでaxiosを使っっているのですが、オブジェクトは 'undefined' である可能性があります。となってしまいます。



## コード
```ここに言語を入力
import axios from "axios";

// define app API url
axios.defaults.baseURL = process.env.REACT_APP_API_URL;
// configure headers
axios.interceptors.request.use(
  (config) => {
    if (!config.headers.Authorization) {
      const token = localStorage.getItem("authToken");

      if (token) {
        config.headers.Authorization = `Bearer ${token}`;
      }
    }
    return config;
  },
  (error) => Promise.reject(error)
);

export default {
  get: axios.get,
  post: axios.post,
  put: axios.put,
  delete: axios.delete,
};
```
## 画像
![イメージ説明](d0bc31e73266418f4e72748a61f42647.png)

また別の書き方がありましたら教えて頂きたいです。
よろしくお願いします。

TypeScritpでのaxiosでオブジェクトは 'undefined' である可能性があります。となる

問題の詳細:
ReactのLoginPageコンポーネントで、Axiosを用いたPOSTリクエストを実装しています。VSCode上では正常に動作しているのですが、ESLintの実行時に下記のようなエラーが発生します。エラーは、型の安全性に関連しているようです。

エラーメッセージ:
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-09-19/ae28c6dd-7e12-4cfc-bffc-e55f0ec34404.png)
状況:
npm run lintを実行した際に、上記のESLintエラーが表示されます。
@typescript-eslint/no-unsafe-assignmentや@typescript-eslint/no-unsafe-callといった型安全性に関するルールで引っかかっているようです。
使用しているのはaxiosのPOSTリクエストで、APIからのレスポンスを型安全に扱おうとしていますが、うまくいきません。

試したこと:
AxiosErrorやAxiosResponseなどを使用して、型の安全性を確保しようとしましたが、エラーが解消されません。
エラー箇所において、型アサーションや例外処理などを試しましたが、ESLintの警告を取り除くことができません。

コードの該当箇所:


### 修正版：ヘディングのテキストコードの該当箇所:
import { Typography } from '@material-tailwind/react';
import axios, { AxiosResponse } from 'axios'; // AxiosErrorを追加
import React, { useState } from 'react';
import InputCheckboxComponent from '@/components/atoms/input_checkbox';
import InputTextComponent from '@/components/atoms/input_text';
import LinkComponent from '@/components/atoms/link';
import FormCard from '@/components/molecules/formCard';
import DefaultComponent from '@/components/templates/default';

// import { LoginResponse } from './type';

// LoginResponse型の定義
interface LoginResponse {
  authorization?: {
    token: string;
  };
}

// 環境変数の型定義
declare const process: {
  env: {
    REACT_APP_API_URL?: string;
  };
};

export default function LoginPage() {
  const [email, setEmail] = useState<string>('');

  const API_URL = process.env.REACT_APP_API_URL;

  if (!API_URL) {
    throw new Error('API URL is not defined in the environment variables');
  }

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    const password = formData.get('password');

    if (typeof password === 'string') {
      const data = { email, password };
      console.log(data);
      try {
        const response: AxiosResponse<LoginResponse> = await axios.post<LoginResponse>(API_URL, data, {
          headers: { 'Content-Type': 'application/json' },
        });
        if (response.data && 'authorization' in response.data && response.data.authorization) {
          const token: string = response.data.authorization.token;
          console.log('Token:', token);
        } else {
          console.error('Invalid response structure');
        }
      } catch (error) {
        if (axios.isAxiosError(error)) {
          console.error('Axios error:', error.response?.data ?? 'No response data');
        } else if (error instanceof Error) {
          console.error('Unexpected error:', error.message);
        } else {
          console.error('An unknown error occurred');
        }
      }
    } else {
      console.error('Password is not valid');
    }
  };

質問:
このエラーはどのように対処すればよいのでしょうか？
axios.isAxiosErrorを使った型ガードや例外処理は正しく記述されていると思われますが、ESLintでエラーが発生する理由がわかりません。
TypeScriptとAxiosを使って型安全なリクエストを行う際に、ESLintの警告を回避する最適な方法についてアドバイスをいただけると助かります。

環境情報:
Node.jsバージョン: v20.16.0
npmバージョン:10.8.1
ESLintバージョン: v8.57.0
TypeScriptバージョン: Version 5.5.3
axiosバージョン: axios@1.7.7
reactバージョン:@material-tailwind/react@2.1.9
│  └─ react@18.2.0
└─ react@18.3.1



ESLintエラーの直しかたがわかりません。（react・axsios）

### 前提
React+Next.js+TyoeScriptを使用(フロントエンドのみ)

### 実現したいこと

axiosを用いて、APIからレスポンスを受け取りたい。
そのためにuseEffectで`axios.get`を宣言してURLより取得。

### 発生している問題・エラーメッセージ

```
Access to XMLHttpRequest at 'http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=e37192690e181c31&lat=34.67&lng=135.52&range=5&order=4' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
```

### 該当のソースコード

```TyoeScript
useEffect(() => {
    axios.get('http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=${API_KEY}&lat=34.67&lng=135.52&range=5&order=4',{
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "POST,GET,PUT,DELETE",
        "Access-Control-Allow-Headers": "Content-Type"
      }
    })//URL
    .then(res => {
      setStoreDate(res.data)
      console.log(res);
    })
    .catch(error=>{
      //失敗した時の処理
      console.log('エラーやで');
      console.log(typeof(error));
    })
}, [])
```

### 試したこと

エラー文より、CORSエラーが発生していてheaderを書きなさい、とのことだったので
https://syachiku.net/react-axios-cors/
上記サイトを参考に
```
 headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "POST,GET,PUT,DELETE",
        "Access-Control-Allow-Headers": "Content-Type"
      }
```
を追記してみたが、エラー内容変わらず。。。
どなたかCORSエラーについてについてお分かりになる方、ご教授いただけると大変嬉しいです…！
※APIのURL自体は直接アクセスできること確認済み。

### 補足情報（FW/ツールのバージョンなど）

"next": "13.0.6",
"react": "18.2.0",
"axios": "^1.2.1",


【axios】CORSエラーについて

```
    let test="";

    axios.get('url',{
      params: {
        form_id:1
      }
    }).then(res => {
      this.test = res
    });
```

apiを叩く際にパラメータでform_idを受け渡す必要があるとします。axiosではこのような記述でレスポンスが返ってくるのですが、これをfetch APIに書き直すやり方を教えていただきたいです。
initというオプションを使うとは思うのですが、どのように記述すればいいか調べてもいまいちわかりませんでした。
よろしくお願いします。

fetch APIでパラメータを渡す方法

### vueでaxiosを使用し、郵便番号検索APIをたたくとCORSのエラーが出る

```vue
<script>
data() {
 return {
  headers: {
    'Content-Type': 'application/json;charset=UTF-8',
    'Access-Control-Allow-Origin': '*',
   }
 }
},
methods: {
 axios.get('https://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060', this.headers)
 .then(response => {
    console.log('status', response.status);
    console.log('body', response.data);
  })
 .catch(err => {
    console.log('err', err);
  })
}
</script>
```
色々調べていたのですが、上記のやり方で解決されている方が多く、真似してみたのですが、


`Access to XMLHttpRequest at 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.`

というエラーが出てしまいます。
おかしいところ、他にも設定しなくてはいけないところがあったら教えていただけますと幸いです。

Vue.js  axios でCORSエラーを解決したい

### 前提・実現したいこと
お世話になります。
ReactNativeでアプリ・サーバ間の連携部分を実装しており、下記のエラーに遭遇しました。
axiosのget,postや連携先(公開されているいくつかのREST APIを試してみましたが結果は同じでした)問わず発生している状態です。
※リクエストを投げて結果を取得してから2分程して下記のエラーが画面に表示されます。

エラーでググってみましたが、同様の事例があまり見当たらないため質問させていただきました。

### 発生している問題・エラーメッセージ

```
Possible Unhandled Primise Rejection(id: 0);
Error: Network Error
```

### 該当のソースコード

```typescript
import * as axios from 'axios';

//...(略)...

axios.post('http://hogehoge:foo/bar', {data : 'data'})
.then(res => {
  // resを基にいくつかの処理
  console.log(res);
}).catch(err => {
  // err表示
  console.log(err);
});

```

### 試したこと
- エラーは出ているものの、上記コードのcatchには入っていないようです(console.log()が利いていないため)
- 正常に処理自体はできているようです(then内の諸々の処理を通っている)

### 補足情報（FW/ツールのバージョンなど）
- 使用端末(エミュレータ)
Android Studio Emulator (Android8.1, API27)

【ReactNative】axiosでpost実行時にエラーが発生する

### 前提

APIを叩いてAssetの情報を取得したいのですが、AxiosでAssetの情報やurlを渡すレスポンスのところでエラーになり詰まっています。
どこに問題があるのか教えていただきたいです。

### 実現したいこと

ここに実現したいことを箇条書きで書いてください。
・AssetのAPIにデータをPOSTして、書き換えた情報をGETで出力する。
・現状POSTメソッドがレスポンスエラーを出しているので、それを解消したい

### 発生している問題・エラーメッセージ

```
エラーメッセージ
```javascript
AxiosError
status: 404
error code: undefined
レスポンスエラー
{ status: 'ERROR', message: 'ユーザーが存在しません、APIキーを確認してください。' }
404
{
  server: 'nginx/1.20.1',
  date: 'Thu, 04 Aug 2022 07:04:20 GMT',
  'content-type': 'application/json; charset=utf-8',
  'content-length': '106',
  connection: 'close',
  'x-powered-by': 'Express',
  'access-control-allow-origin': '*',
  etag: 'W/"6a-VRisG/GkKCxL0bankgjzXZnS8q4"'
}
{
  transitional: {
    silentJSONParsing: true,
    forcedJSONParsing: true,
    clarifyTimeoutError: false
  },
  adapter: [Function: httpAdapter],
  transformRequest: [ [Function: transformRequest] ],
  transformResponse: [ [Function: transformResponse] ],
  timeout: 0,
  xsrfCookieName: 'XSRF-TOKEN',
  xsrfHeaderName: 'X-XSRF-TOKEN',
  maxContentLength: -1,
  maxBodyLength: -1,
  env: {
    FormData: [Function: FormData] {
      LINE_BREAK: '\r\n',
      DEFAULT_CONTENT_TYPE: 'application/octet-stream'
    }
  },
  validateStatus: [Function: validateStatus],
  headers: {
    Accept: 'application/json, text/plain, */*',
    'Content-Type': 'application/json',
    'User-Agent': 'axios/0.27.2',
    'Content-Length': 354
  },
  method: 'post',

```
### 該当のソースコード
```JavaScript
//postするパラメータ
//url等は今回伏せます
const url = '{apiのurl}'; 
    const options =({
      data: {folderId: 0, folderType: 'Project', name: 'ROOTFOLDER', parent: 0},
      params: {
        apikey:'{サイトのapikey}',
        assetTags: '[\n  "OuraRing", "Sleep"\n]\n',
        sendToRawData: 'true',
        sendToTopData: 'true',
        strict: 'true'
      },
      headers: {'Content-Type': 'application/json'}, 
    });
   //動作させるときにログを出すまでが早すぎると、ログが出ないので15秒遅延させてます。
    setTimeout(()=>{
    axios.post(url,options)
    .then(function (response) {
      console.log(response.data);
    })
//axiosのエラーかどうかを判断するためのチェックif文。実行時にはAxiosErrorを通ってます。
    .catch(function (error) {
      if (axios.isAxiosError(error)){
        console.log('status:', error.response?.status)
        console.log('error code:', error.response?.data.errorCode)
      }
      if (error.response) {
        // The request was made and the server responded with a status code
        // that falls out of the range of 2xx
        console.log(error.response.data);
        console.log(error.response.status);
        console.log(error.response.headers);
        
      } else if (error.request) {
        // The request was made but no response was received
        // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
        // http.ClientRequest in node.js
        console.log(error.request);
       
      } else {
        // Something happened in setting up the request that triggered an Error
        console.log('Error', error.message);
      }
      console.log(error.config);

```

### 試したこと

optionsの中のapikeyを書き直して、間違っていないことを確認したり
optionsのheadersの中身をcontent-typeを変えたりしてみました
### 補足情報（FW/ツールのバージョンなど）
Axiosはver0.20です

以上で説明として足りてるかわかりませんがすみませんよろしくお願いします。