常連

JavaScriptで、開いたウィンドウのオブジェクトを取得したいのですが、"cross-origin frame"エラーが出てしまいます。

'http://localhost:3000/english/image'には、http header 'Access-Control-Allow-Origin', '*' を指定していますが、意味がなかったみたいです。(CORSの一括りだと思ったのですが違うのでしょうか…。)

サーバーサイドでcross-origin frameを許可するにはどうしたら良いでしょうか？

```
var myWindow = window.open('http://localhost:3000/english/image','_blank','height=400,width=400,top=40,left=80',false);

undefined
myWindow.document
VM325650:1 Uncaught DOMException: Blocked a frame with origin "https://www.google.co.jp" from accessing a cross-origin frame.
    at <anonymous>:1:10
```

cross-origin frameを許可するには

### 実現したいこと
Chrome拡張機能から、ニコニコ動画の[スナップショット検索API](https://site.nicovideo.jp/search-api-docs/snapshot)を利用したい。

### 発生している問題・エラーメッセージ
```
Access to fetch at 'https://api.search.nicovideo.jp/api/v2/snapshot/video/contents/search?q=%E5%88%9D%E9%9F%B3%E3%83%9F%E3%82%AF&targets=title&fields=contentId,title,viewCounter&filters[viewCounter][gte]=10000&_sort=-viewCounter&_offset=0&_limit=3&_context=apiguide' from origin 'chrome-extension://【Extension ID】' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
```

### 該当のソースコード
・manifest.json
```json
{
  "manifest_version": 3,

  // 中略

  "background": {
    "service_worker": "event.js"
  },
  "permissions": [
    "tabs"
  ],
  "content_scripts": [
    {
      "matches": ["http://hogehoge/*"],
      "css": ["style.css"],
      "js": ["main.js"]
    }
  ],
  "host_permissions": [
    "<all_urls>"
  ]
}
```

・main.js
```JavaScript
async function fetchMovie(){  // 特定のhtmlボタンが押されたら発火する
    await chrome.runtime.sendMessage({name: 'fetchMovie'});
}

chrome.runtime.onMessage.addListener((request, options) => {
    if (request.name === 'movieTitle') {
        let title = request.data.returnValue;

        const movieTitle = document.getElementById('movieTitle');
        movieTitle.textContent = title;
    }
});
```

・events.js
```JavaScript
chrome.runtime.onMessage.addListener((request) => {
    let returnValue = null;

    if (request.name === 'fetchMovie') {
        let url = 'https://api.search.nicovideo.jp/api/v2/snapshot/video/contents/search' +
            '?q=%E5%88%9D%E9%9F%B3%E3%83%9F%E3%82%AF&targets=title&fields=contentId,title,viewCounter' +
            '&filters[viewCounter][gte]=10000&_sort=-viewCounter&_offset=0&_limit=3&_context=apiguide';

        fetch(url)
            .then(
                resp => {resp.json()}
            ).then(
                json => {returnValue = json}
            );
    }

    chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
        chrome.tabs.sendMessage(
            tabs[0].id, {
            name: 'movieTitle',
            data: {returnValue}
            }
        )
    });
});
```

### 試したこと
[Chrome 拡張機能の CORS エラーを回避（Manifest V3）](https://qiita.com/not13/items/d805d66814a0bc81dc6a)を参考に、manifest.jsonに「host_permissions」を追加し、「https: //api.search.nicovideo.jp/\*」 や「https: //api.search.nicovideo.jp/api/v2/snapshot/video/contents/\*」、「https: //\*/\*」などを記載してみたのですが、いずれも上手くいきませんでした。（リンクになってしまうので空白入れています。）
また、fetch関数のmodeにno-corsを設定してみたところ空のレスポンスが返ってきました。


Chrome拡張機能開発での外部APIアクセス時にCORSを回避できない

現在フロントのHTMLからAPIを叩いてメールを送信しようとしています。
しかし、送信ボタンを押すと下記のようなエラーがコンソールに出力されます
`Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.`

このエラーをググったところ今いるURLから他のURLにリクエストを送ることができないようになっていると書かれてありました
そのためこれを回避するために下記のようのコードを書いたのですが、どうもエラーが解消されません。
どのように書いたらAPIを叩けるのか教えていただきたいです。

```JS
const button = document.getElementById("button");
button.addEventListener("click", function(e) {

    e.preventDefault();

    const name = document.getElementById('name').value;
    const subName = document.getElementById('subName').value;
    const companyName = document.getElementById('companyName').value;
    const pref_name = document.getElementById('pref_name').value;
    const location = document.getElementById('location').value;
    const companyLocation = document.getElementById('companyLocation').value;
    const tellNumber = document.getElementById('tellNumber').value;
    const mailAddress = document.getElementById('mailAddress').value;
    const question = document.getElementById('question').value;

    function sendmail(subject, body) {
        return fetch('MY-API', {
            method: 'POST',
            mode: 'cors',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ subject, body })
        }).then(onLoadFunc);
    }
    sendmail(name,subName,companyName,pref_name,location,companyLocation,tellNumber,mailAddress,question);
});
```

CORSでJSからAPIを叩けない

現在、HTML・JS・FastAPIを使用してWebアプリを作成しているのですが、
EdgeでCORS(クロスオリジン）の突破ができません。

Chromeでは下記サイトを参考に、設定を変更することで無効化は出来ましたが、
Edgeでのやり方が分かりませんでした。
[CORS(クロスオリジン)エラーを無視するためのブラウザ設定](https://webbibouroku.com/Blog/Article/cors-browser-setting)

上記サイトのやり方だと、Edgeではプロパティからリンク先の編集ができません。

---
また、下記サイトを参考にコマンドラインからの起動も試してみましたが、
Windowsのため？openコマンドが使えませんでした。
[開発時にCORSを無視するGoogleChromeの起動オプション](https://qiita.com/mottox2/items/498bb31d67caa2d8a71f)

---

また、以下のようにコマンドを打ち、ショートカットからEdgeが起動できても、
検索バーに 「--disable-web-security」と表示されるだけで、
実際にCORSが無効になった様子はありませんでした。

```
start microsoft-edge: --disable-web-security
```
```
start "Microsoft_Edge.lnk" --disable-web-security
```

---

お時間ある方で、**Edgeで開発用にCORSを無効** にするやり方をご存じの方いらっしゃいましたらご助力頂けますと幸いです。


---

### 追記

In Privateブラウザを試しにコマンドで下記のように開いてみたら開けた。
起動の仕方はあってるのか・・・？
でも --disable-web-security を同じように指定すると検索されてしまう。

```
start "Microsoft_Edge.lnk" '-private'
⇒　In Private ブラウザを開くことに成功
```

```
start "Microsoft_Edge.lnk" '-disable-web-security'
⇒ 検索窓に -disable-web-securityと入るだけ
```

```
start "Microsoft_Edge.lnk" '--disable-web-security'
⇒ 検索窓に --disable-web-securityと入るだけ
```

---

### 回答を受けての追記

ProgramFilesのどこを探しても Edgeのexeファイルが見つからず、ショートカットから起動しようとしています。

startコマンドではなく違うコマンドを使うべきなのでしょうか・・・？


```cmd
start "Microsoft_Edge.lnk" --disable-web-security --user-data-dir="C:\Users\hoge\AppData\Local\Google\Chrome\User Data"

Error:⇒ Start-Process : 引数 '--user-data-dir=C:\Users\hoge\AppData\Local\Google\Chrome\User Data' を受け入れる位置指定パラメーターが見つかりません。
```

```cmd
 start microsoft-edge: --disable-web-security --user-data-dir="C:\Users\hoge\AppData\Local\Google\Chrome\User Data"

Error:⇒ Start-Process : 引数 '--user-data-dir=C:\Users\hoge\AppData\Local\Google\Chrome\User Data' を受け入れる位置指定パラメーターが見つかりません。

```

```cmd
 "Microsoft_Edge.lnk" --disable-web-security --user-data-dir="C:\Users\hoge\AppData\Local\Google\Chrome\User Data"

Error:⇒式またはステートメントのトークン 'disable-web-security' を使用できません。
```

```cmd
 microsoft-edge: --disable-web-security --user-data-dir="C:\Users\hoge\AppData\Local\Google\Chrome\User Data"

Error:⇒用語 'microsoft-edge:' は、コマンドレット、関数、スクリプト ファイル、または操作可能なプログラムの名前として認識されません。
```

開発用にEdgeで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で止められる

laravelで作成したapiをjsのXMLHttpRequestを使って叩こうとしています。
サーバー側とクライアント側は違うサーバーで運用しており、共にbasin認証がかけてあります。

### サーバー側
 laravelを使って作成しています。 Corsの許可をおこなっているmiddlewareは以下です。
```php
// middleware/Cors.php
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin','*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Headers', 'Origin, Content-Type, Accept, Authorization, X-Requested-With')
            ->header('Access-Control-Allow-Credentials', 'true');
    }
```

### クライアント側
 jsのXMLHttpRequestを使って叩いています。
```js
  var request = new XMLHttpRequest();
  // URLを開く
  request.open('GET', url , [true,clientId,clientSecret]);
  request.responseType = 'json';

  // レスポンスが返ってきた時の処理を記述 
  request.onload = function () {
    // レスポンスが返ってきた時の処理
    //省略
  }
  // リクエストをURLに送信
  request.send();
```

### エラー内容
```error
index.php:1864 GET http://サーバーurl 401 (Unauthorized)
 (anonymous) @ index.php:1864
 mightThrow @ jquery-3.4.1.js:3557
 process @ jquery-3.4.1.js:3625
 setTimeout (async)
 (anonymous) @ jquery-3.4.1.js:3663
 fire @ jquery-3.4.1.js:3291
 fireWith @ jquery-3.4.1.js:3421
 fire @ jquery-3.4.1.js:3429
 fire @ jquery-3.4.1.js:3291
 fireWith @ jquery-3.4.1.js:3421
 ready @ jquery-3.4.1.js:3901
 completed @ jquery-3.4.1.js:3911
index.php:1 Access to XMLHttpRequest at 'http://サーバーurl' from origin 'サーバーurl' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
```

### やってみたこと

 - setRequestHeaderを使ってbasin認証の情報を付与する。
```js
var authorizationBasic = window.btoa(clientId + ':' + clientSecret);

request.open('GET', 'url', true);
request.responseType = 'json';
request.setRequestHeader('Authorization', 'Basic ' + authorizationBasic);
```

 - Postmanから叩いた場合はデータが取れます。この事からサーバー側の問題ではないのではないかと考えています。

 - 開発時にlocalhostで実装した際には動いており、サーバーに乗せたときに動かなくなった為、basic認証周りではないのかと考えていますが、いくつかのXMLHttpRequestにbasic認証情報を与える試しましたが反応がなく困っております。

問題の本質が見切れていない状態ですが困ってしまいました。何か気になる方でも構いません。回答よろしくお願い致します。

## 解決方法
withCredentialsプロパティをtrueに設定する。
この際にサーバー側の'Access-Control-Allow-Origin'の設定がワイルドカード(*)になっているとエラーが発生するので、クライアント側のドメイン指定のみにしてあげる必要がありました。

```js
// URLを開く
  request.open('GET', url, [true, clientId, clientSecret]);
  request.responseType = 'json';
  request.withCredentials = true;
```

XMLHttpRequestでBasic認証の付いているサーバーに対しapiを叩く


フロント(next.js)とバックエンド(nest.js)で分けて作成し、APIでデータのやり取りを行う、webAppを作成しています。

ローカルホストで、それぞれ起動して実装を進めていましたが、
APIにAuthorizationヘッダーをつけたところ、突然以下のようなエラーが発生しました。

```ここに言語を入力
Access to fetch at 'http://localhost:8000/api/post/userId/1234567' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
```

調べたところ、
APIにAuthorizationヘッダーをつけたことにより、preflight requestが飛ぶ条件に当てはまってしまい、preflight request時にヘッダーを削除してしまう

みたいなところまでは出てきました。
しかし調べても、Authorizationヘッダーをつけたまま、これを回避する方法がよくわかりませんでしたので、ご教授いただけたらと思います。


フロント側でAPIをリクエストしている方法は、以下の通りです。
（PostmanでAPIのリクエスト自体には成功しているのでバックエンド側は問題ない認識です。）

 ```ここに言語を入力
   const url = "http://localhost:8000/api/post/userId/1234567";

    const request = {
        method: "POST",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded",
            "Authorization": localStorage.getItem('token'),
        },
        body: params
    }

    const response = await fetch(url, request);
    const posts = await response.status

    return posts
```





(CORS)preflight requestのエラーの回避方法について

### 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.`

というエラーが出てしまいます。
おかしいところ、他にも設定しなくてはいけないところがあったら教えていただけますと幸いです。