jquery - 当 POST 方法失败时，如何修复 Jquery 上的 cors origin 错误？

Question

嗨，团队，我遇到以下错误，并且似乎无法修复它，当我在 Visual Studio 代码上执行 Rest 客户端请求(不是浏览器或任何 Restful 工具)时，我的 post 方法始终失败。

jquery.js:9664 POST ->url<- 404(未找到)

从源 Y 到 X 的 XMLHttpRequest 访问已被 CORS 策略阻止:请求的资源上不存在“Access-Control-Allow-Origin” header 。

//此错误的 JavaScript 代码。

 // button for switch functionality on/off.
  $(document).ready(function() {
    $('#toggle_event_editing ').click(function(){
      if($(this).hasClass('locked_active')) {
      $('#switch_status').html('Switched off');
        $.ajax({
          url:'myurl',
          type:'POST',
          data:{
            payload_raw: 'AAA',
            dev_id:'mkr1300'
          },
         success:function(response){
         alert(response);
          },
         error:function() {
           $('#error').text("There was an error while processing your request. Please try again");
          }
        }); 

    }else{
    $('#switch_status').html('Switched on.');
    $.ajax({
      url:'myurl',
      type:'POST',
      data:{
        payload_raw:'AAE',
        dev_id:'mkr1300'
      },
      success:function(response) {
      alert(response);
      },
      error:function() {
      $('#error').text("There was an error while processing your request.Please try again");
      }
    });
    }
    });
  });

Answer 1

我认为您的后端正在阻止请求。最短的解决方案是将这段代码添加到后端项目的 webconfig 中:

<httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="application/json" />
        <add name="Access-Control-Allow-Method" value="GET,POST,PUT,DELETE,OPTIONS" />
      </customHeaders>
</httpProtocol>