在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>

After click on Continue button posting the thirdparty site without changing the URL.In IE browser it's working fine but other browsers are not working, I am facing the below issue..

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.');                                   }
                                                                      });
                                                                  };

                                }]);

ISSUE in Browser Console

XMLHttpRequest cannot load https://en.wikipedia.org/wiki/W3Schools . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:8081 ' is therefore not allowed access. The response had HTTP status code 501..

Any help much appreciated . Thanks in advance

Answer 1

use corsproxy npm install corsproxy .

then do a corsproxy . It'll start on 1337/9292.. Depending on where it starts, (lets say 9292) append your external url ie in your case " https://en.wikipedia.org/wiki/W3Schools " with http://localhost:9292/en.wikipedia.org/wiki/W3Schools and it'll work fine.