AngularJS একটি ক্রস-উত্স সংস্থার জন্য একটি বিকল্প HTTP অনুরোধ সঞ্চালন করে




cors cross-domain (10)

আমি AngularJS কে একটি ক্রস-উত্স সংস্থার সাথে যোগাযোগ করার চেষ্টা করছি যেখানে আমার টেম্পলেট ফাইলগুলি সরবরাহকারী সম্পদ হোস্টটি একটি পৃথক ডোমেনে থাকে এবং তাই XHR অনুরোধ যে কৌণিক সঞ্চালনগুলি ক্রস ডোমেন হতে হবে। আমি এই কাজের জন্য HTTP অনুরোধের জন্য আমার সার্ভারে উপযুক্ত CORS হেডার যোগ করেছি, কিন্তু এটি কাজ বলে মনে হচ্ছে না। সমস্যাটি হল যে যখন আমি আমার ব্রাউজারে HTTP অনুরোধগুলি পরীক্ষা করি (ক্রোম) সম্পদ ফাইলটিতে প্রেরিত অনুরোধটি একটি বিকল্প অনুরোধ (এটি একটি GET অনুরোধ হওয়া উচিত)।

আমি AngularJS এ একটি বাগ বা আমি কিছু কনফিগার করতে হবে কিনা তা নিশ্চিত নই। আমি বুঝতে পারছি যে এক্সএইচআর রেপারটি কোনও বিকল্প HTTP অনুরোধ তৈরি করতে পারে না তাই মনে হচ্ছে ব্রাউজারটি GET অনুরোধটি সম্পাদন করার আগে সম্পত্তিকে ডাউনলোড করার আগে "অনুমোদিত" হলে তা সনাক্ত করার চেষ্টা করছে। যদি এই ক্ষেত্রে হয়, তাহলে কি আমার সংস্থান হোস্ট সহ CORS হেডার (অ্যাক্সেস-কন্ট্রোল-অনুমতি-মূল: http://asset.host ..। ) সেট করতে হবে?


Angular 1.2.0rc1 + এর জন্য আপনাকে একটি সংস্থান UrlWelelist যুক্ত করতে হবে।

1.2: মুক্তি সংস্করণ তারা একটি escapeForRegexp ফাংশন যোগ করা যাতে আপনি আর স্ট্রিং থেকে পালাতে হবে। আপনি সরাসরি ইউআরএল যোগ করতে পারেন

'http://sub*.assets.example.com/**' 

সাব ফোল্ডার জন্য ** যোগ করতে ভুলবেন না। এখানে 1.2 এর জন্য একটি কাজ jsbin হয়: http://jsbin.com/olavok/145/edit

1.2.0rc: যদি আপনি এখনও একটি আরসি সংস্করণে থাকেন, কৌণিক 1.2.0rc1 সমাধানটি এই রকম দেখাচ্ছে:

.config(['$sceDelegateProvider', function($sceDelegateProvider) {
     $sceDelegateProvider.resourceUrlWhitelist(['self', /^https?:\/\/(cdn\.)?yourdomain.com/]);
 }])

এখানে একটি jsbin উদাহরণ যেখানে এটি 1.2.0rc1 এর জন্য কাজ করে: http://jsbin.com/olavok/144/edit

প্রাক 1.2: পুরোনো সংস্করণের জন্য ( http://better-inter.net/enabling-cors-in-angular-js/ ) আপনার কনফিগারে নিম্নলিখিত 2 টি লাইন যুক্ত করতে হবে:

$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];

এখানে একটি jsbin উদাহরণ যেখানে এটি প্রাক 1.2 সংস্করণগুলির জন্য কাজ করে: http://jsbin.com/olavok/11/edit


আইআইএস এমভিসি 5 / কৌণিক সিএলআইয়ের জন্য (হ্যাঁ, আমি ভালভাবে আপনার অ্যাঙ্গুলার JS সহ সমস্যাটি সচেতন) API এর সাথে প্রকল্পটি আমি নিম্নলিখিত করেছি:

<system.webServer> নোডের অধীনে web.config

    <staticContent>
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
    </staticContent>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type, atv2" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS"/>
      </customHeaders>
    </httpProtocol>

global.asax.cs

protected void Application_BeginRequest() {
  if (Request.Headers.AllKeys.Contains("Origin", StringComparer.OrdinalIgnoreCase) && Request.HttpMethod == "OPTIONS") {
    Response.Flush();
    Response.End();
  }
}

এটি MVC এবং WebAPI উভয়ের পক্ষে অন্য সমস্ত রান না করেই আপনার সমস্যার সমাধান করবে। আমি তখন অ্যাঙ্গুলার সিএলআই প্রকল্পে একটি HttpInterceptor তৈরি করেছি যা স্বয়ংক্রিয়ভাবে প্রাসঙ্গিক শিরোনাম তথ্যের সাথে যোগ করা হয়েছে। এই একই পরিস্থিতির মধ্যে কেউ সাহায্য করে আশা করি।


আপনি যদি কোন নোডজেএস সার্ভার ব্যবহার করেন তবে আপনি এই লাইব্রেরিটি ব্যবহার করতে পারেন, এটি আমার জন্য সূক্ষ্ম কাজ করেছে https://github.com/expressjs/cors

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

app.use(cors());

এবং আপনি একটি npm update করতে পারেন পরে।


আপনি যদি রিস্ট API এর জন্য জার্সি ব্যবহার করেন তবে আপনি নীচের মতো করতে পারেন

আপনি আপনার webservices বাস্তবায়ন পরিবর্তন করতে হবে না।

আমি জার্সি 2.x জন্য ব্যাখ্যা করবে

1) প্রথমে নীচে প্রদর্শিত হিসাবে একটি ResponseFilter যোগ করুন

import java.io.IOException;

import javax.ws.rs.container.ContainerRequestContext;
import javax.ws.rs.container.ContainerResponseContext;
import javax.ws.rs.container.ContainerResponseFilter;

public class CorsResponseFilter implements ContainerResponseFilter {

@Override
public void filter(ContainerRequestContext requestContext,   ContainerResponseContext responseContext)
    throws IOException {
        responseContext.getHeaders().add("Access-Control-Allow-Origin","*");
        responseContext.getHeaders().add("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");

  }
}

2) তারপর web.xml, জার্সি servlet ঘোষণা মধ্যে নীচের যোগ করুন

    <init-param>
        <param-name>jersey.config.server.provider.classnames</param-name>
        <param-value>YOUR PACKAGE.CorsResponseFilter</param-value>
    </init-param>

এই আমার সমস্যা সংশোধন করা হয়েছে:

$http.defaults.headers.post["Content-Type"] = "text/plain";

একই ডকুমেন্ট বলেছেন

সাধারণ অনুরোধগুলি (উপরে আলোচনা করা হয়েছে) ভিন্ন, "প্রিফ্লাইটেড" অনুরোধগুলি প্রথমে অন্য অনুরোধের জন্য HTTP বিকল্প অনুরোধের শিরোনাম পাঠায়, যাতে প্রকৃত অনুরোধটি প্রেরণের জন্য নিরাপদ কিনা তা নির্ধারণ করতে। ক্রস সাইট অনুরোধগুলি এভাবে প্রফ্লাইড করা হয়েছে যেহেতু তাদের ব্যবহারকারীর ডেটাতে প্রভাব রয়েছে। বিশেষ করে, একটি অনুরোধ preflighted হয় যদি:

এটি GET বা POST ছাড়া অন্য পদ্ধতি ব্যবহার করে। এছাড়াও, পোষ্টটি যদি অ্যাপ্লিকেশন / এক্স-www-form-urlencoded, মাল্টিপার্ট / ফর্ম-ডেটা, বা পাঠ্য / প্লেইন ছাড়া অন্য কোনও সামগ্রী-টাইপ সহ অনুরোধের ডেটা পাঠাতে ব্যবহার করা হয়, যেমন POST অনুরোধ সার্ভারে একটি XML প্লেলোড পাঠায় তবে আবেদন / এক্সএমএল বা টেক্সট / এক্সএমএল ব্যবহার করে, তারপর অনুরোধ preflighted হয়।

এটি অনুরোধে কাস্টম হেডার সেট করে (যেমন অনুরোধ X-PINGOTHER এর মতো হেডার ব্যবহার করে)

যখন মূল অনুরোধটি কোনও কাস্টম হেডারের সাথে পান না তখন ব্রাউজারটি এখন বিকল্প অনুরোধ করে না যা এটি এখন করে। সমস্যা এটি একটি হেডার এক্স-অনুরোধ তৈরি করে-যা বিকল্প বিকল্প অনুরোধ করে। এই শিরোনামটি সরানোর জন্য https://github.com/angular/angular.js/pull/1454 দেখুন


এখানে আমি ASP.NET এ এই সমস্যাটি স্থির করার উপায়

  • প্রথমে, আপনি nuget প্যাকেজটি Microsoft.AspNet.WebApi.Cors যুক্ত করতে হবে

  • তারপর ফাইলটি App_Start \ WebApiConfig.cs পরিবর্তন করুন

    public static class WebApiConfig    
    {
       public static void Register(HttpConfiguration config)
       {
          config.EnableCors();
    
          ...
       }    
    }
  • আপনার নিয়ামক বর্গ এই বৈশিষ্ট্য যোগ করুন

    [EnableCors(origins: "*", headers: "*", methods: "*")]
    public class MyController : ApiController
    {  
        [AcceptVerbs("POST")]
        public IHttpActionResult Post([FromBody]YourDataType data)
        {
             ...
             return Ok(result);
        }
    }
  • আমি এই ভাবে জেসন পাঠাতে সক্ষম ছিলাম

    $http({
            method: 'POST',
            data: JSON.stringify(data),
            url: 'actionurl',
            headers: {
                'Content-Type': 'application/json; charset=UTF-8'
            }
        }).then(...)

রেফারেন্স: ASP.NET ওয়েব API এ ক্রস-মূল অনুরোধগুলি সক্ষম করা 2


পার্টি দেরী দেরী,

যদি আপনি এঙ্গুলার 7 (বা 5/6/7) এবং পিএইচপিটি API হিসাবে ব্যবহার করেন এবং এখনও এই ত্রুটিটি পান তবে শেষ শিরোনাম (পিএইচপি API) এ নিম্নলিখিত হেডার বিকল্পগুলি যোগ করার চেষ্টা করুন।

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

দ্রষ্টব্য : শুধুমাত্র Access-Control-Allow-Methods । তবে, আমি এখানে অন্য দুটি Access-Control-Allow-Origin এবং Access-Control-Allow-Headers আটকে আছি, কেবলমাত্র আপনার API এ সঠিকভাবে কথোপকথন করার জন্য আপনাকে Angular App এ সঠিকভাবে সেট করার জন্য এই সমস্তগুলির প্রয়োজন হবে।

এই কেউ সাহায্য করে আশা করি।

চিয়ার্স।


সম্পূর্ণরূপে pkozlowski এর মন্তব্য বর্ণিত। আমি AngularJS 1.2.6 এবং ASP.NET ওয়েব অ্যাপির সাথে কাজ করার সমাধান করেছি কিন্তু যখন আমি AngularJS কে 1.3.3 তে আপগ্রেড করেছিলাম তখন অনুরোধগুলি ব্যর্থ হয়েছে।

  • ওয়েব এপিআই সার্ভারের সমাধানটি কনফিগারেশন পদ্ধতির শুরুতে OPTIONS অনুরোধগুলির হ্যান্ডলিং যোগ করা ছিল ( এই ব্লগ পোস্টে আরও তথ্য):

    app.Use(async (context, next) =>
    {
        IOwinRequest req = context.Request;
        IOwinResponse res = context.Response;
        if (req.Path.StartsWithSegments(new PathString("/Token")))
        {
            var origin = req.Headers.Get("Origin");
            if (!string.IsNullOrEmpty(origin))
            {
                res.Headers.Set("Access-Control-Allow-Origin", origin);
            }
            if (req.Method == "OPTIONS")
            {
                res.StatusCode = 200;
                res.Headers.AppendCommaSeparatedValues("Access-Control-Allow-Methods", "GET", "POST");
                res.Headers.AppendCommaSeparatedValues("Access-Control-Allow-Headers", "authorization", "content-type");
                return;
            }
        }
        await next();
    });

দ্রষ্টব্য: এটি Angular এর সর্বশেষ সংস্করণটির সাথে কাজ করে না তা নিশ্চিত না।

মূল:

OPTIONS অনুরোধটি ওভাররাইড করাও সম্ভব (শুধুমাত্র Chrome এ পরীক্ষা করা হয়েছে):

app.config(['$httpProvider', function ($httpProvider) {
  //Reset headers to avoid OPTIONS request (aka preflight)
  $httpProvider.defaults.headers.common = {};
  $httpProvider.defaults.headers.post = {};
  $httpProvider.defaults.headers.put = {};
  $httpProvider.defaults.headers.patch = {};
}]);






preflight