Включить CORS AngularJS для отправки запроса HTTP POST
Я хочу отправить HTTP-запрос POST, отправив форму на мой сервер, который находится в другом домене (включенные cors в сценарии сервера с использованием node.js).
Это скрипт, в котором все 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");
}
});
}
}); ...
Я использую AngularJS 1.2.22 и, как указано в этом руководстве (Включить CORS), для включения CORS необходимо вручную включить CORS в конфигурации. Но это все еще не работает. Вот что я получил из консоли браузера.
Блокировка перекрестного запроса: та же политика происхождения запрещает чтение удаленного ресурса в http://localhost:8183/user/register. Это можно исправить, переместив ресурс в тот же домен или включив CORS.
Я новичок в AngularJS, поэтому любая помощь будет признательна, если я укажу на любые ошибки, которые я совершил... Спасибо!
---- ОБНОВЛЕНИЕ: Добавление сценария 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();
});
}
});
});
РЕШЕНИЕ
Спасибо за добрые ответы, но мне удалось включить CORS на моем серверном скрипте (запущенном на узле), затем я попытался использовать этот
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
в моем клиентском скрипте, когда вызывается http-запрос, и, наконец, он позволяет мне получить ответ от сервера без проблем с CORS! Итак, я подумал, что это может быть проблема с заголовком.. Итак, спасибо за добрые ответы! Надеюсь, что это поможет любому, кто столкнется с этой проблемой в будущем!
Ответы
Ответ 1
То, что я делаю CORS в экспресс-приложениях, вы должны помнить о OPTIONS, потому что для некоторых фреймворков есть 2 вызова для CORS, первый из них - OPTIONS, который проверяет, какие методы доступны, а затем есть фактический вызов, OPTIONS требуют только пустой ответ 200 OK
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);
Ответ 2
Я долгое время боролся за это, наконец, я получил решение для этого сейчас.
Вы можете добиться того же самого на стороне сервера, а не на стороне клиента. Вот простой фильтр 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() {}
}
Примечание. Если вам нужна помощь с импортом выше, перейдите на страницу ниже: Запросы фильтра для CORS
Запросы фильтра для CORS
Добавьте этот фильтр в свой 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
Добавьте '<', '/" > ' теги в код web.xml, мне пришлось удалить, чтобы опубликовать этот комментарий.
Ответ 3
Добавление заголовка типа контента к следующему исправило проблему для меня.
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
Ответ 4
Для тех пользователей, которые находят ответ на запросы CORS от Angular JS. Во-первых, не тратьте достаточно времени на добавление ненужных заголовков в конфигурацию JS. Вам не нужно ничего менять в своем интерфейсе. Просто добавьте следующую аннотацию в свой контроллер или на уровень метода.
@CrossOrigin
Если вы хотите включить CORS для любого конкретного URL-адреса, используйте следующую аннотацию:
@CrossOrigin(origins = "http://localhost:9000")
Приведенное выше решение дано для конфигурации CORS метода Controller. Вы также должны выполнить настройку Global CORS, добавив следующее в свой класс приложения.
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedOrigins("http://localhost:9000");
}
};
}
Ссылка: https://spring.io/guides/gs/rest-service-cors/
Я надеюсь, что это поможет. Мир! :)
Ответ 5
Вам просто нужно добавить некоторые свойства заголовка в заголовке ответа на стороне сервера.
Вот пример сервера 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();
});
Он разрешит вызов AJAX по междоменному домену AngularJS.
Я нашел это решение из Как включить CORS в AngularJs