AngularJS ดำเนินการร้องขอ OPTIONS HTTP สำหรับทรัพยากรข้ามแหล่ง

ฉันกำลังพยายามตั้งค่า AngularJS เพื่อสื่อสารกับทรัพยากรข้ามแหล่งที่ซึ่งโฮสต์สินทรัพย์ที่ส่งไฟล์เทมเพลตของฉันอยู่ในโดเมนอื่นดังนั้น XHR ขอให้ดำเนินการเชิงมุมจะต้องข้ามโดเมน ฉันได้เพิ่มส่วนหัว CORS ที่เหมาะสมลงในเซิร์ฟเวอร์ของฉันสำหรับคำขอ HTTP เพื่อให้ทำงานได้ แต่ดูเหมือนจะไม่ทำงาน ปัญหาคือเมื่อฉันตรวจสอบคำขอ HTTP ในเบราว์เซอร์ของฉัน (chrome) คำขอที่ส่งไปยังไฟล์เนื้อหาคือคำขอ OPTIONS (ควรเป็นคำขอ GET)

ฉันไม่แน่ใจว่านี่เป็นข้อผิดพลาดใน AngularJS หรือไม่ถ้าฉันต้องการกำหนดค่าบางอย่าง จากสิ่งที่ฉันเข้าใจว่า XHR wrapper ไม่สามารถทำการร้องขอ OPTIONS HTTP ดังนั้นดูเหมือนว่าเบราว์เซอร์กำลังพยายามหาว่า "อนุญาต" เพื่อดาวน์โหลดเนื้อหาก่อนหรือไม่ก่อนที่จะดำเนินการตามคำขอ GET หากเป็นกรณีนี้ฉันจำเป็นต้องตั้งค่าส่วนหัว CORS (การควบคุมการเข้าถึงอนุญาตให้กำเนิด: http://asset.host .. .) กับโฮสต์สินทรัพย์ด้วยหรือไม่

คำขอ OPTIONS นั้นไม่ได้หมายถึงจุดบกพร่องของ AngularJS นี่เป็นวิธีที่ Cross-Origin Resource Sharing บังคับให้เบราว์เซอร์ทำงาน โปรดอ้างถึงเอกสารนี้: https://developer.mozilla.org/en-US/docs/HTTP_access_controlซึ่งอยู่ในส่วน "ภาพรวม" ที่ระบุไว้:

มาตรฐานการแบ่งปันทรัพยากรต้นกำเนิดทำงานโดยการเพิ่มส่วนหัว HTTP ใหม่ที่อนุญาตให้เซิร์ฟเวอร์อธิบายชุดของต้นกำเนิดที่ได้รับอนุญาตให้อ่านข้อมูลนั้นโดยใช้เว็บเบราว์เซอร์ นอกจากนี้สำหรับวิธีการร้องขอ HTTP ที่อาจทำให้เกิดผลข้างเคียงกับข้อมูลผู้ใช้ (โดยเฉพาะอย่างยิ่งสำหรับวิธี HTTP อื่น ๆ นอกเหนือจาก GET หรือสำหรับการใช้งาน POST ด้วย MIME บางประเภท) ข้อกำหนดกำหนดว่าเบราว์เซอร์ "preflight" คำขอร้องขอวิธีการสนับสนุนจากเซิร์ฟเวอร์ที่มีส่วนหัวคำขอ HTTP OPTIONS จากนั้นเมื่อ "อนุมัติ" จากเซิร์ฟเวอร์ส่งคำขอจริงด้วยวิธีการร้องขอ HTTP จริง เซิร์ฟเวอร์ยังสามารถแจ้งลูกค้าว่าควรส่ง "ข้อมูลรับรอง" (รวมถึงคุกกี้และข้อมูลการตรวจสอบ HTTP) ด้วยคำขอหรือไม่

เป็นการยากมากที่จะให้โซลูชันทั่วไปที่ทำงานกับเซิร์ฟเวอร์ WWW ทั้งหมดเนื่องจากการติดตั้งจะแตกต่างกันไปขึ้นอยู่กับเซิร์ฟเวอร์และคำกริยา HTTP ที่คุณต้องการให้การสนับสนุน ฉันขอแนะนำให้คุณอ่านบทความที่ยอดเยี่ยมนี้ ( http://www.html5rocks.com/en/tutorials/cors/ ) ซึ่งมีรายละเอียดเพิ่มเติมเกี่ยวกับส่วนหัวที่แน่นอนซึ่งจำเป็นต้องส่งโดยเซิร์ฟเวอร์

สำหรับ Angular 1.2.0rc1 + คุณต้องเพิ่ม resourceUrlWhitelist

1.2:รุ่นที่วางจำหน่ายจะเพิ่มฟังก์ชัน escapeForRegexp เพื่อให้คุณไม่ต้องหนีจากสายอีกต่อไป คุณสามารถเพิ่ม URL ได้โดยตรง

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

ตรวจสอบให้แน่ใจว่าได้เพิ่ม ** สำหรับโฟลเดอร์ย่อย นี่คือ jsbin ที่ใช้งานได้สำหรับ 1.2: http://jsbin.com/olavok/145/edit

1.2.0rc:หากคุณยังอยู่ในเวอร์ชั่น rc Angular 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 บรรทัดต่อไปนี้ใน config ของคุณ:

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

นี่คือตัวอย่าง jsbin ที่ใช้ได้กับรุ่น 1.2 ก่อน: http://jsbin.com/olavok/11/edit

หมายเหตุ:ไม่แน่ใจว่าสามารถใช้งานได้กับ Angular รุ่นล่าสุด

ORIGINAL:

เป็นไปได้ที่จะแทนที่คำขอ 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 = {};
}]);

บริการของคุณจะต้องตอบOPTIONSคำขอกับส่วนหัวเช่นนี้:

Access-Control-Allow-Origin: [the same origin from the request]
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: [the same ACCESS-CONTROL-REQUEST-HEADERS from request]

นี่คือเอกสารที่ดี: http://www.html5rocks.com/en/tutorials/cors/#toc-adding-cors-support-to-the-server

เอกสารเดียวกันบอกว่า

แตกต่างจากคำของ่าย (กล่าวถึงข้างต้น) คำขอ "preflighted" ก่อนส่งส่วนหัวคำขอ HTTP OPTIONS ไปยังทรัพยากรในโดเมนอื่นเพื่อตรวจสอบว่าคำขอจริงปลอดภัยที่จะส่ง คำขอข้ามไซต์จะทำการ preflighted เช่นนี้เนื่องจากอาจมีผลกระทบต่อข้อมูลผู้ใช้ โดยเฉพาะอย่างยิ่งคำขอจะได้รับการ preflight ถ้า:

มันใช้วิธีการอื่นที่ไม่ใช่ GET หรือ POST นอกจากนี้หาก POST ใช้ในการส่งข้อมูลคำขอด้วย Content-Type นอกเหนือจาก application / x-www-form-urlencoded, multipart / form-data หรือ text / plain เช่นถ้าคำขอ POST ส่ง XML payload ไปยังเซิร์ฟเวอร์ ใช้ application / xml หรือ text / xml ดังนั้นการร้องขอจะถูก preflighted

มันตั้งค่าส่วนหัวที่กำหนดเองในคำขอ (เช่นคำขอใช้ส่วนหัวเช่น X-PINGOTHER)

เมื่อคำขอดั้งเดิมคือรับโดยไม่มีส่วนหัวที่กำหนดเองเบราว์เซอร์ไม่ควรทำการร้องขอตัวเลือกที่ทำตอนนี้ ปัญหาคือมันสร้างส่วนหัว X-Requested-With ซึ่งบังคับให้ตัวเลือกการร้องขอ ดูhttps://github.com/angular/angular.js/pull/1454เกี่ยวกับวิธีลบส่วนหัวนี้

วิธีนี้แก้ไขปัญหาของฉัน:

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

หากคุณกำลังใช้เซิร์ฟเวอร์ nodeJS คุณสามารถใช้ห้องสมุดนี้ได้ผลดีสำหรับฉันhttps://github.com/expressjs/cors

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

app.use(cors());

npm updateและหลังจากที่คุณสามารถทำ

นี่คือวิธีที่ฉันแก้ไขปัญหานี้ใน 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);
      }
  }

• ฉันสามารถส่ง json ไปยังการกระทำด้วยวิธีนี้

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

การอ้างอิง: การเปิดใช้งานคำขอข้ามแหล่งกำเนิดใน ASP.NET Web API 2

ยังไงก็เถอะฉันแก้ไขมันโดยการเปลี่ยน

<add name="Access-Control-Allow-Headers" 
     value="Origin, X-Requested-With, Content-Type, Accept, Authorization" 
     />

ถึง

<add name="Access-Control-Allow-Headers" 
     value="Origin, Content-Type, Accept, Authorization" 
     />

อธิบายอย่างสมบูรณ์ในความคิดเห็นของ pkozlowski ฉันมีวิธีแก้ปัญหาการทำงานกับ AngularJS 1.2.6 และ ASP.NET Web Api แต่เมื่อฉันอัพเกรด AngularJS เป็น 1.3.3 การร้องขอล้มเหลว

• โซลูชันสำหรับเซิร์ฟเวอร์ Web Api คือการเพิ่มการจัดการคำขอ 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();
  });

หากคุณใช้ Jersey สำหรับ REST API คุณสามารถทำได้ดังนี้

คุณไม่ต้องเปลี่ยนการใช้เว็บเซอร์

ฉันจะอธิบายสำหรับ Jersey 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 ในการประกาศ Jersey servlet เพิ่มด้านล่าง

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

ฉันเลิกพยายามแก้ไขปัญหานี้แล้ว

IIS web.config ของฉันมีส่วนเกี่ยวข้อง " Access-Control-Allow-Methods" ฉันได้ทดลองเพิ่มการตั้งค่า config ลงในโค้ด Angular ของฉัน แต่หลังจากเขียนไปสองสามชั่วโมงเพื่อพยายามให้ Chrome เรียกบริการเว็บ JSON ข้ามโดเมนฉันก็หมดท่า

ในท้ายที่สุดฉันเพิ่มหน้าเว็บตัวจัดการ ASP.Net ใบ้รับสิ่งนั้นเพื่อเรียกบริการเว็บ JSON ของฉันและส่งคืนผลลัพธ์ มันใช้งานได้ใน 2 นาที

นี่คือรหัสที่ฉันใช้:

public class LoadJSONData : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";

        string URL = "......";

        using (var client = new HttpClient())
        {
            // New code:
            client.BaseAddress = new Uri(URL);
            client.DefaultRequestHeaders.Accept.Clear();
            client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
            client.DefaultRequestHeaders.Add("Authorization", "Basic AUTHORIZATION_STRING");

            HttpResponseMessage response = client.GetAsync(URL).Result;
            if (response.IsSuccessStatusCode)
            {
                var content = response.Content.ReadAsStringAsync().Result;
                context.Response.Write("Success: " + content);
            }
            else
            {
                context.Response.Write(response.StatusCode + " : Message - " + response.ReasonPhrase);
            }
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

และในตัวควบคุมเชิงมุมของฉัน ...

$http.get("/Handlers/LoadJSONData.ashx")
   .success(function (data) {
      ....
   });

ฉันแน่ใจว่ามีวิธีที่ง่ายกว่า / ทั่วไปกว่าในการทำเช่นนี้ แต่ชีวิตสั้นเกินไป ...

สิ่งนี้เหมาะกับฉันและฉันสามารถทำงานปกติได้ในขณะนี้ !!

สำหรับ IIS MVC 5 / Angular CLI (ใช่ฉันทราบดีว่าปัญหาของคุณคือโครงการ Angular JS) ด้วย API ที่ฉันทำต่อไปนี้:

web.configภายใต้<system.webServer>โหนด

    <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 ในโครงการ Angular CLI ที่เพิ่มไว้ในข้อมูลส่วนหัวที่เกี่ยวข้องโดยอัตโนมัติ หวังว่าสิ่งนี้จะช่วยให้ใครบางคนอยู่ในสถานการณ์ที่คล้ายกัน

สายไปงานเลี้ยงเล็ก ๆ น้อย ๆ

หากคุณใช้ Angular 7 (หรือ 5/6/7) และ PHP เป็น API และยังคงได้รับข้อผิดพลาดนี้ให้ลองเพิ่มตัวเลือกส่วนหัวต่อไปนี้ที่จุดสิ้นสุด (PHP 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 ของคุณอย่างถูกต้อง

หวังว่านี่จะช่วยใครซักคน

ไชโย