質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

6866閲覧

「Access-Control-Allow-Origin: *」なのにCORSでアクセスできない

yonotsui

総合スコア28

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/07/18 17:26

編集2019/07/18 17:29

angularを使用してPOSTでデータを送信したいのですがCORSでのアクセス拒否されます。
後述のエラーメッセージからわかる通り、ローカルファイルから実行しています。
レスポンスヘッダーを見る限りAccess-Control-Allow-Originは*なのでnullでもアクセスできると思うのですが…
なぜできないのでしょうか。
どうすれば解決できるのでしょう。

なおサーバーは自分で管理しているものではないので、サーバープログラミングの変更はできません。

・エラーメッセージ

Access to XMLHttpRequest at 'https://api.furimawatch.net/ggeneral-api/watch/update' from origin 'null' 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. [file:///F:/***********/index.html]

・レスポンスヘッダー

Access-Control-Allow-Credentials: true Access-Control-Allow-Headers: origin, content-type, accept, authorization, userId, apiVersion, deviceid, tokenService Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS, HEAD Access-Control-Allow-Origin: * Access-Control-Max-Age: 300

・index.html

html

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3<html ng-app="myApp" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> 4 <head> 5 <title>JavaScript テスト</title> 6 <!--ライブラリ--> 7 <script type="text/javascript" src="./lib/angular.min.js"></script> 8 9 <!--ソース--> 10 <script type="text/javascript" src="./js/angularTest.js"></script> 11 </head> 12 <body ng-controller="enabledTest"> 13 14 </body> 15</html>

・js/angularTest.js

javascript

1//userIdとdeviceidにはGoogle・FacebookのIDが含まれるので隠しています。 2//CORSのテストには影響しません 3var header= 4{ 5 'userId': '**************', 6 'apiVersion': '2', 7 'deviceid': 'PC-**************', 8 'tokenService': 1, 9 'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8', 10}; 11 12if(typeof angular == 'undefined') { alert('angular is not loaded'); } 13 14var module=angular.module('myApp',[]); 15module.controller('enabledTest', ['$scope','$http', function($scope,$http) 16{ 17 var parts= 18 [ 19 "$$hashKey=object:2485", 20 "created=1545481208683", 21 "deleted=false", 22 "gseq=2807364", 23 "kw11=%E6%98%8E%E6%B2%BB", 24 "kw21=%E3%82%B6%E3%83%90%E3%82%B9", 25 "kw31=%E3%82%A6%E3%82%A7%E3%82%A4%E3%83%88%E3%83%80%E3%82%A6%E3%83%B3", 26 "modified=1563155085863", 27 "name=%E4%BE%A1%E6%A0%BC3600:%E5%8E%9F%E4%BE%A12190:amazon64%E6%98%8E%E6%B2%BB+%E3%82%B6%E3%83%90%E3%82%B9+%E3%82%A6%E3%82%A7%E3%82%A4%E3%83%88%E3%83%80%E3%82%A6%E3%83%B3+%E3%83%A8%E3%83%BC%E3%82%B0%E3%83%AB%E3%83%88%E9%A2%A8%E5%91%B3%E3%80%9050%E9%A3%9F%E5%88%86%E3%80%91+1,050g", 28 "seq=1", 29 "switchAll=false", 30 "switchPopup=true", 31 "switchTimeline=true", 32 "updateMeta=true", 33 "ver=v3", 34 "watchid=8e5a2fcc-1853-44b0-bb3b-690dc7fd154c_1", 35 ]; 36 37 var paramText=parts.join('&'); 38 $http( 39 { 40 method: 'POST', 41 url: 'https://api.furimawatch.net/' + 'ggeneral-api/watch/update', 42 headers:header, 43 data:paramText, 44 }) 45 .then(function(data, status, headers, config){ 46 console.log("success flag change"); 47 },function(data, status, headers, config){ 48 console.log("error"); 49 50 }); 51}]);

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ファイルからのアクセスになっているので、origin(所謂ドメイン部分)がnullになってしまっているのでは?

サーバーにアップロードするなり
localhostにhttpサーバー立てれば解決できるかも?

投稿2019/07/18 18:31

mikkame

総合スコア5036

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yonotsui

2019/07/19 03:56

ありがとうございます ワイルドカードならnullも受け付けるのかと期待していたのですが… やっぱりnullは「Access-Control-Allow-Origin:null」の時しか使えないということですね。 やったことはありませんがlocalhostにサーバーを立てて試してみます。
退会済みユーザー

退会済みユーザー

2019/07/19 04:56

横からですがnode.jsインストール済みなら、http-serverっての使えば楽ですよ。 https://www.npmjs.com/package/http-server index.htmlあるフォルダにcdしてhttp-serverって打つだけです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問