Origin <origin>はAccess-Control-Allow-Originでは許可されていません

XMLHttpRequest cannot load http://localhost:8080/api/test. Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin. 

私はクロスドメインのajaxリクエストについて読み、根本的なセキュリティ問題を理解しています。私の場合、2台のサーバーがローカルで実行されており、テスト中にクロスドメインリクエストを有効にしています。

localhost:8080 - Google Appengine dev server
localhost:3000 - Node.js server

localhost:8080 - GAE serverノードサーバーからページが読み込まれている間にajaxリクエストを発行しています。最も簡単で安全なものは何ですか（disable-web-securityオプションでChromeを起動したくない）。を変更'Content-Type'する必要がある場合、ノードサーバーで変更する必要がありますか？どうやって？

これらは異なるポートで実行されているため、異なるJavaScript originです。それらが同じマシン/ホスト名にあることは重要ではありません。

サーバー（localhost：8080）でCORSを有効にする必要があります。このサイトをチェックしてください：http : //enable-cors.org/

サーバーにHTTPヘッダーを追加するだけです。

Access-Control-Allow-Origin: http://localhost:3000

または、簡単にするために：

Access-Control-Allow-Origin: *

サーバーがCookieを設定しようとしているときに「*」を使用しないでください。 withCredentials = true

認証されたリクエストに応答するとき、サーバーはドメインを指定する必要があり、ワイルドカードを使用できません。

あなたはwithCredentialsここについてもっと読むことができます

Chromeでajaxリクエストにすばやく対応する必要がある場合、このChromeプラグインを使用すると、適切な応答ヘッダーを追加することで、任意のソースから任意のサイトにアクセスできます

Chrome拡張機能Allow-Control-Allow-Origin：*

CORSがこれを解決できるようにする必要があります

アプリが単純なnode.jsで作成されている場合

次のように応答ヘッダーに設定します

var http = require('http');

http.createServer(function (request, response) {
response.writeHead(200, {
    'Content-Type': 'text/plain',
    'Access-Control-Allow-Origin' : '*',
    'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE'
});
response.end('Hello World\n');
}).listen(3000);

アプリがExpress Frameworkで作成されている場合

次のようなCORSミドルウェアを使用します

var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', "*");
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
}

を介して適用

app.configure(function() {
    app.use(allowCrossDomain);
    //some other code
});    

ここに2つの参照リンクがあります

1. How-to-Allow-Cors-in-Express-Nodejs
2. diving-into-node-js-very-first-app #Ajaxセクションを参照

@Rocket hazmatの回答を受け入れ、解決策に導きます。これは、ヘッダーを設定するために必要なGAEサーバー上にありました。これらを設定する必要がありました

"Access-Control-Allow-Origin" -> "*"
"Access-Control-Allow-Headers" -> "Origin, X-Requested-With, Content-Type, Accept"

設定"Access-Control-Allow-Origin" はエラーを出しました

Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers.

また、認証トークンを送信する必要がある場合は、これも追加します

"Access-Control-Allow-Credentials" -> "true"

また、クライアントで設定 withCredentials

これにより、2つのリクエストがサーバーに送信されますOPTIONS。認証Cookieは一緒に送信されないため、外部認証を処理する必要があります。

router.jsでは、get / postメソッドを呼び出す前にコードを追加するだけです。エラーなしで動作します。

//Importing modules @Brahmmeswar
const express = require('express');
const router = express.Router();

const Contact = require('../models/contacts');

router.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
  });

Chromeからajaxを使用してクロスオリジンリソースを呼び出すときに問題が発生しました。

ノードjsアプリとローカルhttpサーバーを使用して、ノードjsアプリをデプロイしました。

クロスオリジンリソースにアクセスすると、エラーレスポンスが返されました

その上で1つの解決策を見つけました、

1）app.jsファイルに以下のコードを追加しました

res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");

2）クロスオリジンリソースと呼ばれる私のhtmlページで $.getJSON();

$.getJSON("http://localhost:3000/users", function (data) {
    alert("*******Success*********");
    var response=JSON.stringify(data);
    alert("success="+response);
    document.getElementById("employeeDetails").value=response;
});

Expressを使用している場合は、corsミドルウェアを次のように使用できます。

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

これをインポートの下のNodeJSサーバーに追加します。

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

その後403を取得した場合は、WEB.XML tomcat構成のフィルターを次のように減らしてください。

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
  </init-param>
</filter>

私はついにApache Tomcat8の答えを得ました

tomcat web.xmlファイルを編集する必要があります。

おそらくそれはwebappsフォルダ内にあります、

sudo gedit /opt/tomcat/webapps/your_directory/WEB-INF/web.xml

それを見つけて編集する

<web-app>


<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
  </init-param>
  <init-param>
    <param-name>cors.support.credentials</param-name>
    <param-value>true</param-value>
  </init-param>
  <init-param>
    <param-name>cors.preflight.maxage</param-name>
    <param-value>10</param-value>
  </init-param>
</filter>


<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>



</web-app>

これにより、すべてのホストにAccess-Control-Allow-Originが許可されます。すべてのホストからホストのみに変更する必要がある場合は、

<param-name>cors.allowed.origins</param-name>
<param-value>http://localhost:3000</param-value>

上記のコードを*からhttp：// your_public_IPまたはhttp://www.example.comに

ここでTomcatフィルターのドキュメントを参照できます

ありがとう

こんにちはこれはノードのCORS問題を解決する方法です。Node.jsのサーバー「api」側（またはサーバーのファイル）にこれらの行を追加するだけで、「cors」を必ずインストールしてください

    const express = require('express');
    const app = express();
    app.use(express.json());
    var cors = require('cors');
    app.use(cors());

dataType： 'jsonp'を使用してください。

   async function get_ajax_data(){

       var _reprojected_lat_lng = await $.ajax({

                                type: 'GET',

                                dataType: 'jsonp',

                                data: {},

                                url: _reprojection_url,

                                error: function (jqXHR, textStatus, errorThrown) {

                                    console.log(jqXHR)

                                },

                                success: function (data) {

                                    console.log(data);



                                    // note: data is already json type, you just specify dataType: jsonp

                                    return data;

                                }

                            });





 } // function               

PHPの場合、これを使用してヘッダーを設定します。

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

router.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "*");
res.header("Access-Control-Allow-Headers", "*");
next();});

これをフロントエンドから呼び出すルートに追加します。たとえば、http：// localhost：3000 / users / registerを呼び出す場合は、このルートが配置するバックエンドの.jsファイルにこのコードフラグメントを追加する必要があります。

誰かが解決策を探している場合に、ここでExpressを使用している場合は、迅速な解決策です。

const express = require('express')
const cors = require('cors')
const app = express()

1）npmを使用してcorsをインストールする npm install cors --save

2）インポートする[必須] const cors = require('cors')

3）ミドルウェアとして使用する app.use(cors())

insatllとcorsの使用法の詳細。それはそれであり、うまくいけばうまくいきます。

Google Chromeを使用している場合は、次のアドオンをインストールしてみてください。

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related