javascript - 使用 Angular JS 在第三方网站中发布时出现跨域问题

Question

    HTML Code:                                                                       

    <div  ng-app="myApp" ng-controller="myController">
    <div>
       <input type="button" data-ng-click="submit()"                                                                   value="Continue"></input>
      </div>
    </div>

点击“继续”按钮发布第三方网站而不更改 URL 后。在 IE 浏览器中它工作正常，但其他浏览器无法工作，我面临以下问题..

Angular Code:   
 var myAppex = angular.module("myApp", []);
 myAppex.controller('myController', ['$scope','$window', '$http','$location',
                   function($scope, $window, $http,$location) {

                $scope.submit = function() {                                   
              var headersSend = {
                                                                                                                 'Access-Control-Allow-Origin': '*',                                                           'Access-Control-Allow-Credentials': 'true',                                                     'Access-Control-Allow-Headers': 'X-Custom-Header,x-requested-with, Content-Type, origin, authorization, accept, client-security-token,Overwrite, Destination, User-Agent, Translate, Range, Content-Range, Timeout, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control, Location, Lock-Token, If',                               'Access-Control-Allow-Methods' : 'POST, GET, OPTIONS, PUT',                                                   'Content-Type': 'application/json;charset=utf-8',                                                            'Accept': 'application/json',                                                                };                                                                              $http({method: 'POST',                                                               url:respData.thirdpartyurl,  //ex: https://en.wikipedia.org/wiki/W3Schools                       crossDomain: true, processData: true,                                                                 dataType: 'jsonp',                                                                headers : headersSend,                                                              data: respData.somedata                                                           }).success(function(data,status, headers, config) {                                            $('body').html(data);                                                                         headers  = headersSend;                                                           }).error(function(data, status, headers, config) {                      if(status == 400) {                                                $scope.messages = data; } else {                                         alert('Unexpected server error.');                                   }
                                                                      });
                                                                  };

                                }]);

浏览器控制台中的问题

XMLHttpRequest 无法加载 https://en.wikipedia.org/wiki/W3Schools 。请求的资源上不存在“Access-Control-Allow-Origin” header 。来源'http://localhost:8081 ' 因此不允许访问。响应的 HTTP 状态代码为 501..

非常感谢任何帮助。提前致谢

Answer 1

使用 corsproxy npm install corsproxy。

然后执行corsproxy。它将从 1337/9292 开始.. 根据它的开始位置，(假设是 9292)附加您的外部 url，即在您的情况下“https://en.wikipedia.org/wiki/W3Schools ”与 http://localhost:9292/en.wikipedia.org/wiki/W3Schools它会工作得很好。