常連

Reactの勉強中です。
React実践の教科書という本で勉強しているのですが、そのchapter9でつまづいています。
```axios
axios
      .get("https://my-json-server.typicode.com/Goolaa/demo/users2")
      .then((result) => {
        const users = result.data.map((user) => ({
          id: user.id,
          name: `${user.lastname}　${user.firstname}`,
          age: user.age
        }));
        setUserList(users);
      })
      .catch(() => setIsError(true))
      .finally(() => setIsLoading(false));
```
このロジックを動かすと、
```error
TypeError
Cannot read properties of undefined (reading 'get')
```
となります。

ちなみに環境は、
https://codesandbox.io/s/vigilant-robinson-mdhfto?file=/src/App.jsx:329-711
get内のURLを実行すると、きちんと値が返ってきます。
```URLからの返却
[
  {
    "id": 1,
    "firstname": "勉",
    "lastname": "主田",
    "age": 24
  },
  {
    "id": 2,
    "firstname": "未来",
    "lastname": "先岡",
    "age": 28
  },
  {
    "id": 3,
    "firstname": "一郎",
    "lastname": "後藤",
    "age": 23
  }
]
```

どなたか、getでエラーにならない方法をお教えください。


React axiosのgetでエラーになります。

### 前提
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エラーについて

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で止められる

### 前提


### 実現したいこと

ある配列の中のオブジェクトをマップで参照し、それぞれに新しいプロパティを追加したいのですが、`map()`直下ではオブジェクトを代入できたのに対し、`promiseFoo().then()`直下では代入できませんでした。`promiseFoo().then()`から戻り値を取り出すか、直下でオブジェクトを操作するにはどうすればよいでしょうか。

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


```TypeScript
filteredResults.map((result: any) => {
  getIcon(result.link).then((value: any) => {
    console.log('URL: ' + value)
    result.icon = value
  })
}) 
```

```Powershell
Got an icon from https://stackoverflow.com/questions/68788222/filtering-an-axios-response | https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196
URL: https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196
Got an icon from https://stackoverflow.com/questions/38750705/filter-object-properties-by-key-in-es6 | https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196
URL: https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196

```
これだと全く代入されていませんが、ご覧の通り`Promise`オブジェクトから値を取り出すことには成功しています。そして前述のように`map()`直下ならオブジェクトに普通に代入できます。

### 試したこと

```TypeScript
filteredResults.map((result: any) => {
  result.icon = getIcon(result.link).then((value: any) => {
    console.log('URL: ' + value)
    return value
  })
})
```

これだとオブジェクトには`Promise`オブジェクトが代入されてしまいます。

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

```JSON
{
    "ts-node": "^10.9.1",
    "typescript": "^4.8.4",
    "@swc/core": "^1.3.4",
}
```


（解決済み）JavaScript Promise.then()でオブジェクトを操作できない

## エラー内容
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' である可能性があります。となる

### 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エラーを解決したい

### 前提
Next.jsでAPI Routerにサーバーを立てそこに向けてaxios通信をしている

headerにcookieという名前で値を付与しているが、そもそもそのやり方が正しいのかわからない
### 実現したいこと
Axiosでcookieを送りたい

ディベロッパーツール→ネットワークのところにcookieのタブを表示させたい
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-01-08/fbf36834-b95e-4267-93a0-10e5689d28ce.png)
### 発生している問題・エラーメッセージ
axiosの設定でwithCredentials:trueにしても何も起こらない
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-01-08/31df6576-858c-41aa-980c-d7eb93d697a5.png)

フロント側から通信した場合
**Refused to set unsafe header "cookie"**というエラーでheaderに付与したcookieが送れない

サーバーサイドで通信した場合
headerに付与したcookieの値は送れている
### 該当のソースコード

フロント側で通信した場合(headerのcookieは送れない)
```
useEffect(()=>{
  axios.defaults.withCredentials=true
  
  axios({
    method:'POST',
    url:'/api/maker',
    headers:{cookie:'ttttt',withCredentials:true},
    withCredentials:true
        })
  .then(e=>{
    console.log(e.data)
   )
  })
},[])
```
サーバサイドで通信した場合(headerのcookieは送れているパターン)
```
    export const getServerSideProps = async (
      context: GetServerSidePropsContext,
    ) => {
          const create:AxiosInstance = axios.create({
            baseURL: 'http://localhost:3000',
            headers:{cookie:'ttttt',withCredentials:true},
            method:'POST',
            withCredentials:true
          })

      const res=await create({
        url:'/api/maker',
        withCredentials:true
      }).then((e)=>e)
     
      return {props:res.data}
    }
```
### 試したこと
フロントとサーバー側の両方で通信をすること
header内・外にwithCredentials:trueを記載すること
axios.defaults.withCredentials=trueで設定をすること

そもそもローカルホストだとcookieが使えないのでしょうか？


ご回答よろしくお願い致します


Axiosでcookieを送りたい

### 前提

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です

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