http.get request in agularJs controller works fine when my client app and api are in localhost. when api is moved to server., issue arised.
http。当我的客户端应用程序和api位于localhost时,在agularJs控制器中获取请求可以正常工作。当api转移到服务器时。,问题出现。
client side using angularJs
客户端使用angularJs
$http.get('http://domain.com/api/spots/2/0').success(function(datas){
console.log(datas);
});
log gives: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://domain.com/api/spots/2/0. This can be fixed by moving the resource to the same domain or enabling CORS.
日志提供:跨源请求被阻塞:同源策略不允许在http://domain.com/api/spots/2/0中读取远程资源。这可以通过将资源移动到相同的域或启用CORS来修复。
i have added these two lines to my controller construct
我将这两条线添加到控制器构造中。
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET");
still same error.
还是同样的错误。
5 个解决方案
#1
13
Try adding OPTIONS
to the allowed methods.
尝试向允许的方法添加选项。
header("Access-Control-Allow-Methods: GET, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Content-Length, Accept-Encoding");
and return immediately when the request is method 'OPTIONS' once you have set the headers.
一旦你设置了标题,当请求是方法“选项”时立即返回。
if ( "OPTIONS" === $_SERVER['REQUEST_METHOD'] ) {
die();
}
See also this answer.
也看到这个答案。
Angular sends a W3C CORS spec compliant preflight request that will check for the right allowed methods before actually attempting it.
angle发送一个符合W3C CORS规范的飞行前请求,该请求将在实际尝试之前检查正确的允许方法。
Personally, I find the Mozilla Developer Network CORS page a bit easier to read on the matter to help understand the flow of CORS.
就我个人而言,我发现Mozilla Developer Network CORS页面更易于阅读,有助于理解CORS的流程。
#2
2
If anyone else is facing the issue, enabling CORS in rest.php file of Codeigniter REST Controller worked for me. This is also clearly documented in comments here https://github.com/chriskacerguis/codeigniter-restserver/blob/master/application/config/rest.php
如果有其他人面临这个问题,让CORS处于休息状态。Codeigniter REST控制器的php文件为我工作。这里的注释中也清楚地记录了这一点:https://github.com/chriskacerguis/codeigniter-restserver/blob/master/application/config/rest.php
//Change this to TRUE
$config['check_cors'] = TRUE;
//No change here
$config['allowed_cors_headers'] = [
'Origin',
'X-Requested-With',
'Content-Type',
'Accept',
'Access-Control-Request-Method'
];
//No change here
$config['allowed_cors_methods'] = [
'GET',
'POST',
'OPTIONS',
'PUT',
'PATCH',
'DELETE'
];
//Set to TRUE to enable Cross-Origin Resource Sharing (CORS) from any source domain
$config['allow_any_cors_domain'] = TRUE;
//Used if $config['check_cors'] is set to TRUE and $config['allow_any_cors_domain'] is set to FALSE.
//Set all the allowable domains within the array
//e.g. $config['allowed_origins'] =['http://www.example.com','https://spa.example.com']
$config['allowed_cors_origins'] = [];
#3
1
I've added the following constructor in my controller class
我在控制器类中添加了以下构造函数
public function __construct($config = 'rest')
{
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
parent::__construct();
}
#4
0
if you can use jQuery Ajax, then use this line in your script.
如果您可以使用jQuery Ajax,那么请在脚本中使用这一行。
jQuery.support.cors = true; // force cross-site scripting (as of jQuery 1.5)
it solved the problem for me when i tried to post some string using jQuery Ajax from sidebar desktop gadget to the xampp php file.
当我尝试使用jQuery Ajax将一些字符串从侧边栏桌面小工具发布到xampp php文件时,它为我解决了这个问题。
#5
0
Client side => AngularJs (running with Grunt in localhost:9000) Server side => php (codeIgniter solution) (running in localhost:80)
客户端=> AngularJs(运行在localhost:9000)服务器端=> php (codeIgniter解决方案)(运行在localhost:80)
The only thing that worked for me was to add this lines into the webservices controller in my php project:
对我来说,唯一起作用的是在我的php项目中向webservices控制器添加这些行:
/*
here you do whatever you do to build the $data
*/
//but just before returning the method data add this
header('Content-type: application/json');
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET");
header("Access-Control-Allow-Methods: GET, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Content-Length, Accept-Encoding");
echo json_encode($data, JSON_NUMERIC_CHECK);
#1
13
Try adding OPTIONS
to the allowed methods.
尝试向允许的方法添加选项。
header("Access-Control-Allow-Methods: GET, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Content-Length, Accept-Encoding");
and return immediately when the request is method 'OPTIONS' once you have set the headers.
一旦你设置了标题,当请求是方法“选项”时立即返回。
if ( "OPTIONS" === $_SERVER['REQUEST_METHOD'] ) {
die();
}
See also this answer.
也看到这个答案。
Angular sends a W3C CORS spec compliant preflight request that will check for the right allowed methods before actually attempting it.
angle发送一个符合W3C CORS规范的飞行前请求,该请求将在实际尝试之前检查正确的允许方法。
Personally, I find the Mozilla Developer Network CORS page a bit easier to read on the matter to help understand the flow of CORS.
就我个人而言,我发现Mozilla Developer Network CORS页面更易于阅读,有助于理解CORS的流程。
#2
2
If anyone else is facing the issue, enabling CORS in rest.php file of Codeigniter REST Controller worked for me. This is also clearly documented in comments here https://github.com/chriskacerguis/codeigniter-restserver/blob/master/application/config/rest.php
如果有其他人面临这个问题,让CORS处于休息状态。Codeigniter REST控制器的php文件为我工作。这里的注释中也清楚地记录了这一点:https://github.com/chriskacerguis/codeigniter-restserver/blob/master/application/config/rest.php
//Change this to TRUE
$config['check_cors'] = TRUE;
//No change here
$config['allowed_cors_headers'] = [
'Origin',
'X-Requested-With',
'Content-Type',
'Accept',
'Access-Control-Request-Method'
];
//No change here
$config['allowed_cors_methods'] = [
'GET',
'POST',
'OPTIONS',
'PUT',
'PATCH',
'DELETE'
];
//Set to TRUE to enable Cross-Origin Resource Sharing (CORS) from any source domain
$config['allow_any_cors_domain'] = TRUE;
//Used if $config['check_cors'] is set to TRUE and $config['allow_any_cors_domain'] is set to FALSE.
//Set all the allowable domains within the array
//e.g. $config['allowed_origins'] =['http://www.example.com','https://spa.example.com']
$config['allowed_cors_origins'] = [];
#3
1
I've added the following constructor in my controller class
我在控制器类中添加了以下构造函数
public function __construct($config = 'rest')
{
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
parent::__construct();
}
#4
0
if you can use jQuery Ajax, then use this line in your script.
如果您可以使用jQuery Ajax,那么请在脚本中使用这一行。
jQuery.support.cors = true; // force cross-site scripting (as of jQuery 1.5)
it solved the problem for me when i tried to post some string using jQuery Ajax from sidebar desktop gadget to the xampp php file.
当我尝试使用jQuery Ajax将一些字符串从侧边栏桌面小工具发布到xampp php文件时,它为我解决了这个问题。
#5
0
Client side => AngularJs (running with Grunt in localhost:9000) Server side => php (codeIgniter solution) (running in localhost:80)
客户端=> AngularJs(运行在localhost:9000)服务器端=> php (codeIgniter解决方案)(运行在localhost:80)
The only thing that worked for me was to add this lines into the webservices controller in my php project:
对我来说,唯一起作用的是在我的php项目中向webservices控制器添加这些行:
/*
here you do whatever you do to build the $data
*/
//but just before returning the method data add this
header('Content-type: application/json');
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET");
header("Access-Control-Allow-Methods: GET, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Content-Length, Accept-Encoding");
echo json_encode($data, JSON_NUMERIC_CHECK);