Angularjs服务呼叫错误No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上

Question

我托管了一个简单的WCF服务，接口的签名就像这样

[OperationContract]
[WebInvoke(Method = "Get", ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Bare, UriTemplate = "GetMyName/")]
string GetMyName();

但是当我通过角度$ http调用此服务时，我总是得到错误＆＃34;没有访问控制＆＃34;正如问题标题中所述。

httpService.HttpGet('/MyTestService.svc/GetMyName')
                   .then(function (response) {
                     var o=response;                                                      
                    }, function (error) {
                    console.log('An error occured. status : ' + JSON.stringify(error));
                    });

详情服务图层

(function () {
// Define dependency injection parameters  
var injectParams = ['$http'];

// Create the httpService. This service will act as gateway for all calls to WCF channel service.
var httpService = function ($http) {
    // Initialize WCF channel service base url to NULL
    //this.baseServiceUrl = 'http://localhost:12345/TACapp/WS';

    this.baseServiceUrl = 'http://wvm10311:1000/services';

    // Post function
    this.HttpPost = function (data, route) {
        return $http.post(this.baseServiceUrl + route, data);
    }

    // GET function
    this.HttpGet = function (route) {
        return $http({ method: 'GET', url: this.baseServiceUrl + route });
    }
}

// Set dependency injection parameters to service object
httpService.$inject = injectParams;

// Register service
appConfig.service('httpService', httpService);

} ());

以下是Chrome控制台的错误截图。

Answer 1

这是一个CORS问题 - 请看一下这篇文章：No 'Access-Control-Allow-Origin' header is present on the requested resource- AngularJS

简而言之，您需要添加一个特定的标题来告诉它原点是不同的。该帖子包含有关如何执行此操作的更多信息。

Answer 2

您可能正在向其他域发出ajax请求，除非您的服务器支持CORS，否则浏览器不允许这样做。 跨源资源共享（CORS）是一种W3C规范，允许从浏览器进行跨域通信。

简而言之，您必须在服务器中添加特定标头才能使ajax请求正常工作 -

访问控制 - 允许 - 来源：* [或您的域名而不是*]

如需了解更多信息，请阅读 - Adding CORS Support to server.