Javascript 启用 CORS AngularJS 发送 HTTP POST 请求
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29915657/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Enable CORS AngularJS to send HTTP POST request
提问by prameshvari
I want to send an HTTP POST request by submitting a form to my server, which is located at a different domain (enabled cors in the server script using node.js).
我想通过向位于不同域的服务器（使用 node.js 在服务器脚本中启用 cors）提交表单来发送 HTTP POST 请求。
This is the script where all the Angular configurations are :
这是所有 Angular 配置所在的脚本：
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider, $locationProvider, $httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$routeProvider
.when('/', {
controller: 'RouteCtrl',
templateUrl: 'views/home_views.html'
})
.when('/login', {
controller: 'RouteCtrl',
templateUrl: 'views/login_views.html'
})
.when('/register', {
controller: 'RouteCtrl',
templateUrl: 'views/register_views.html'
})
});
myApp.controller("UserController", function($scope, $http) {
$scope.formData = {};
$scope.clickMe = function() {
console.log("Yay");
$http({
method: 'POST',
url: 'http://localhost:8183/user/register',
data: $.param($scope.formData),
})
.success(function(data) {
console.log(data);
if(!data.success) {
console.log("error here");
} else {
console.log("error there");
}
});
}
}); ...
I'm using AngularJS 1.2.22 and as it stated in this tutorial (Enable CORS) to enable CORS, it needs to enable CORS manually in the config. But it's still not working. Here is what I got from the browser console.
我正在使用 AngularJS 1.2.22，正如本教程中所述（启用 CORS）来启用 CORS，它需要在配置中手动启用 CORS。但它仍然无法正常工作。这是我从浏览器控制台得到的。
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8183/user/register. This can be fixed by moving the resource to the same domain or enabling CORS.
跨域请求被阻止：同源策略不允许读取位于http://localhost:8183/user/register的远程资源。这可以通过将资源移动到同一域或启用 CORS 来解决。
I'm quite new to AngularJS so any help would really be appreciated to point out any mistakes I made.. Thank you!
我对 AngularJS 还很陌生，所以如果能指出我犯的任何错误，我们将不胜感激。谢谢！
---- EDIT : Adding server.js script ----
---- 编辑：添加 server.js 脚本 ----
var express = require('express'),
app = express(),
bodyParser = require('body-parser'),
expressValidator = require('express-validator'),
mysql = require('mysql'),
crypto = require('crypto'),
cors = require('cors'),
uuid = require('node-uuid');
var connectionpool = mysql.createPool({
connectionLimit: 1000,
host: 'localhost',
user: 'root',
password: '',
database: 'cloudvm'
});
app.listen(8183);
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(bodyParser.json());
app.use(expressValidator());
app.use(cors());
var user_router = express.Router();
var user_list = user_router.route('/list');
var user_register = user_router.route('/register');
var user_login = user_router.route('/login');
app.use('/user', user_router);
user_register.post(function(req, res, next) {
var errors = req.validationErrors();
if (errors) {
res.status(200);
res.send(errors);
console.log(errors);
return;
}
var data = {
name_user: req.body.name,
email_user: req.body.email,
password_user: req.body.password,
no_telp_user: req.body.no_telp,
company_name_user: req.body.company_name,
address_user: req.body.address,
name_cc_user: req.body.name_cc,
address_cc_user: req.body.address_cc,
no_cc_user: req.body.no_cc,
no_vcv_user: req.body.no_vcv,
expire_month_cc_user: req.body.expire_month,
expire_year_cc_user: req.body.expire_year
};
connectionpool.getConnection(function(err, connection) {
if (err) {
console.error('CONNECTION ERROR:', err);
res.statusCode = 503;
res.send({
result: 'error',
err: err.code
});
} else {
var sql = 'INSERT INTO user SET ?';
console.log(sql)
connection.query(sql, data, function(err, rows, fields) {
if (err) {
console.error(err);
res.statuscode = 500;
res.send({
result: 'error',
err: err.code
});
}
res.send([{
msg: "registration succeed"
}]);
connection.release();
});
}
});
});
SOLUTION
解决方案
Thank you for the kind answers, but I've managed to enable CORS on my server script (running on Node) then I tried to use this
感谢您的友好回答，但我已经设法在我的服务器脚本（在 Node 上运行）上启用了 CORS，然后我尝试使用它
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
on my client-side script when the http request is called, then it finally let me to get response from the server without having the CORS problem! So, I thought it might be the header problem .. So, thank you for kind responses! Hope this would help anyone having this problem in the future!
在调用 http 请求时在我的客户端脚本上，它终于让我从服务器获得响应而不会出现 CORS 问题！所以，我认为这可能是标题问题..所以，感谢您的友好回应！希望这可以帮助将来遇到此问题的任何人！
回答by maurycy
That's how I do CORS in express applications, you have to remember about OPTIONS because for some frameworks there are 2 calls for CORS, first one is OPTIONS which checks what methods are available and then there is actual call, OPTIONS require just empty answer 200 OK
这就是我在快速应用程序中执行 CORS 的方式，您必须记住 OPTIONS，因为对于某些框架，有 2 个 CORS 调用，第一个是 OPTIONS，它检查哪些方法可用，然后有实际调用，OPTIONS 只需要空答案 200 OK
js
js
allowCrossDomain = function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
if ('OPTIONS' === req.method) {
res.send(200);
} else {
next();
}
};
app.use(allowCrossDomain);
回答by srinivas
I have been struggled for a long time to achieve this, finally I got a solution for this now.
我一直在努力实现这一目标，现在终于找到了解决方案。
You can achieve same thing on server side instead of messing around client side. Here is the simple CORS Filter you need to add on server side.
您可以在服务器端实现相同的目标，而不是在客户端搞乱。这是您需要在服务器端添加的简单 CORS 过滤器。
package com.domain.corsFilter;
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
chain.doFilter(req, res);
}
public void init(FilterConfig filterConfig) {}
public void destroy() {}
}
}
Note: If you need help with imports for above, visit the below page topic: Filter requests for CORSFilter requests for CORS
注意：如果您需要上述导入方面的帮助，请访问以下页面主题：过滤 CORS请求过滤 CORS请求
Add this filter in your web.xml
在您的 web.xml 中添加此过滤器
filter
filter-name corsFilter filter-name
filter-class com.domain.corsFilter.SimpleCORSFilter filter-class
filter
filter-mapping
filter-name corsFilter filter-name
url-pattern /* url-pattern
filter-mapping
Add '<', '/>' tags in web.xml code, I had to remove to post this comment.
在 web.xml 代码中添加“<”、“/>”标签，我必须删除才能发布此评论。
回答by Dilhan Jayathilake
Adding content-type header to following fixed the problem for me.
将内容类型标题添加到以下内容为我解决了问题。
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
回答by imbond
For those users who are finding an answer to make CORS requests from Angular JS. Firstly, don't spend enough time in adding unnecessary headers in your JS configuration. You don't have to change anything in your frontend. Just add the following annotation in your controller or at the method level.
对于那些正在寻找从 Angular JS 发出 CORS 请求的答案的用户。首先，不要花足够的时间在 JS 配置中添加不必要的标头。您不必在前端更改任何内容。只需在您的控制器或方法级别添加以下注释。
@CrossOrigin
If you want to enable CORS for any specific URL then use the following annotation,
如果要为任何特定 URL 启用 CORS，请使用以下注释，
@CrossOrigin(origins = "http://localhost:9000")
The above solution is given for the Controller method CORS configuration. You shall also do Global CORS configuration by adding the following in your application class.
上面的解决方案是针对Controller方法CORS配置给出的。您还应该通过在您的应用程序类中添加以下内容来进行全局 CORS 配置。
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedOrigins("http://localhost:9000");
}
};
}
Reference : https://spring.io/guides/gs/rest-service-cors/
参考：https: //spring.io/guides/gs/rest-service-cors/
I hope this help. Peace! :)
我希望这会有所帮助。和平！:)
回答by Chanchal Rajbanshi
You just have to add some header properties in your server side response header.
您只需要在服务器端响应头中添加一些头属性。
Here is an example for NodeJSserver
这是NodeJS服务器的示例
app.all("/api/*", function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With");
res.header("Access-Control-Allow-Methods", "GET, PUT, POST");
return next();
});
It will solve AngularJS cross-domain AJAX call.
它将解决 AngularJS 跨域 AJAX 调用。
I have found this solution from How to enable CORS in AngularJs
我从How to enable CORS in AngularJs 中找到了这个解决方案
