常連

### 前提

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

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

Axiosで404エラーが直らない

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

### 実現したいこと

javascriptとhtmlを分割し、vueとaxiosを使いたい。

### 前提
vueとaxiosを利用したいです。


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

```ブラウザ
取得したデータ：{{ id }}
```

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

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Vue Sample App | AI Academy</title>
    <meta charset="UTF-8">
    
    <script src="https://unpkg.com/vue@next"></script>
    <script src="tameshi.js"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <div id="app">
      <p>取得したデータ：{{ id }}</p>
    </div>
  </body>
</html>
```

```javascript,Vue
Vue.createApp({
  data() {
    return {
      id: '',
    };
  },
// テストとプロトタイプのための無料の偽API を使用
  created() {
    axios
    .get('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => {
    this.id = response.data.id;
    })
    .catch(error => {
      console.error(error);
    });
  },
})
.mount('#app');
```

### 試したこと

htmlと一体では機能しました。


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

mac os 13.4
safariでhtmlを実行しています。

javascriptとhtmlは分割し、vueとaxiosを使いたい。

## エラー内容
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を送りたい

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