0

現在、locahost:3333 で reactjs サイトをテストしており、localhost:54690 で asp.net Web API 2 をテストしています。

ajax にaxiosを使用していますが、リクエストを行うとエラーが発生します。

XMLHttpRequest はhttp://localhost:54690/api/Storage/Getを読み込めません。プリフライト要求への応答がアクセス制御チェックに合格しません: 要求されたリソースに 'Access-Control-Allow-Origin' ヘッダーが存在しません。したがって、オリジン「http://localhost:3333」へのアクセスは許可されていません。応答の HTTP ステータス コードは 500 でした。

Cors を追加しようとしましたが、正しく行っていないと思います。サーバーサイドとクライアントサイドを試してみました。

   var instance = axios.create({
            baseURL: 'http://localhost:54690/api',
            timeout: 1000,
            headers: { 'Access-Control-Allow-Origin': '*' }
        });

        instance.get('/Storage/Get')
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });

サーバ側

[EnableCors(origins: "http://localhost:3333/", headers: "*", methods: "*")]
public class StorageController : ApiController

WebapiConfig.

  public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            config.Filters.Add(new EnableQueryAttribute());

            // Web API configuration and services

            // Web API routes
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );

            config.EnableCors();
        }
    }

編集

私がこれをするときのようです

[EnableCors(origins: " ", headers: " ", methods: "*")]

できます。私のajaxのヘッダーに何も入れる必要さえありません。私はこれが本番環境で発生することを望んでいないので、これは実際にはソウルションではありませんが、私は推測していますか?

また、cors をセットアップできるグローバル関数はありますか? すべてのコントローラーに配置するのはちょっと面倒です。

編集 2

@kormali_2 からのリンクを詳しく調べると、「http://locahost:3333/」があるはずの場所に「http://locahost:3333」があるため、問題が発生している可能性があることがわかります。使用できるグローバルオプションもあります.

4

2 に答える 2

-1

これを試して：

    var instance = axios.create({
        baseURL: 'http://localhost:54690/api',
        timeout: 1000,
        headers: { 
         'Accept': 'application/json',
         'Content-Type': 'application/json',
         'Access-Control-Allow-Origin': '*'
        }
    });
于 2016-08-19T18:22:43.230 に答える