Как подключить вместо симуляции реальный сервер?
Есть отличная симуляция сервера для отладки
http://docs.sencha.com/extjs/6.0/6.0...jax.SimManager Но можно ли сделать, чтобы на этом адресе http://localhost:1841/ работал настоящий сервер? А то симуляция становится очень сложной, когда моделей много и связи между ними непростые. Может в Sencha Cmd есть какой-то прокси. Например сервер доступен по адресу http://localhost:3000/ и как-то прописать для режима sencha app watch, чтобы он был доступен и http://localhost:1841/? |
Так настройте web-сервер(апач например) на папку с проектом и все...
|
Включил сервер. Прописал путь к ресурсу, добавив адрес сервера "http://localhost:3000":
Ext.define("Element.model.GroupOrder", {
extend: "Element.model.Base",
proxy: {
url: "http://localhost:3000/group-orders/"
},
В итоге вместо запроса: Request URL:[url]http://localhost/group-orders/?_dc=1463403931184[/url] Request Method:GET Получаю запрос: Request URL:[url]http://localhost:3000/group-orders/?_dc=1463404004806[/url] Request Method:OPTIONS Сервер конечно же такой запрос не может обработать, так как Request Method:GET поменялся на Request Method:OPTIONS. Почему прокси так себя ведет? |
|
Windows 10.
Веб-сервер с приложением нормально работают, если приложение выгнать командой sencha app watch. Так что с ним все в порядке. Он видит запрос HTTP OPTIONS //group-orders/?_dc=1463405012430 и естественно посылает его нафик, ибо ждет тоже самое, но GET. Прокси настраивается в базовой модели:
Ext.define("Element.model.Base", {
extend: "Ext.data.Model",
requires: ["Ext.data.proxy.Rest"],
fields: [{
name: "id",
type: "auto"
}],
schema: {
namespace: "Element.model",
proxy: {
type: "rest",
reader: {
type: "json",
rootProperty: "data"
}
}
}
});
А в конкретной модели уточняется URL:
Ext.define("Element.model.GroupOrder", {
extend: "Element.model.Base",
proxy: {
url: Element.Application.serverUrl + "/group-orders/"
},
...
где Element.Application.serverUrl = "http://localhost:3000/". . |
Сделал маленький тестовый пример:
index.html
<!DOCTYPE HTML>
<html manifest="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="ext/build/classic/theme-gray/resources/theme-gray-all.css">
<script type="text/javascript" src="../ext/build/ext-all.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body></body>
</html>
index.js
Ext.onReady(function() {
Ext.define('User', {
extend: 'Ext.data.Model',
proxy: {
type: 'rest',
url : 'http://localhost:3000/users'
}
});
var myStore = Ext.create('Ext.data.Store', {
model: 'User',
autoLoad: true
});
});
В консоли отобразилось следующее: Request URL:http://localhost:3000/users?_dc=1463407911716&page=1&start=0&limit=25 Request Method:OPTIONS Status Code:404 Not Found Remote Address:[::1]:3000 То есть снова Request Method:OPTIONS, вместо GET. |
У меня приложение грузится с адреса http://localhost:1841/ (по команде sencha app watch).
А сервер находится на адресе http://localhost:3000/ Если в прокси ставлю URL http://localhost:3000/, то Request Method:OPTIONS, вместо GET Но вот если поставлю такой URL http://localhost:1841/, то уже GET. Получается если домен разный, то прокси вместо GET начинает генерировать OPTIONS. Почему? |
Кстати, в консоли две ошибки. Вот они:
ext-all-rtl-debug.js?_dc=1463408894669:24866 OPTIONS http://localhost:3000//group-orders/?_dc=1463408898753 Ext.define.start @ ext-all-rtl-debug.js?_dc=1463408894669:24866Ext.define.request @ ext-all-rtl-debug.js?_dc=1463408894669:25925Ext.define.sendRequest @ ext-all-rtl-debug.js?_dc=1463408894669:88043Ext.define.doRequest @ ext-all-rtl-debug.js?_dc=1463408894669:88034Ext.define.read @ ext-all-rtl-debug.js?_dc=1463408894669:87404Ext.define.doExecute @ ext-all-rtl-debug.js?_dc=1463408894669:78724Ext.define.execute @ ext-all-rtl-debug.js?_dc=1463408894669:78391Ext.define.flushLoad @ ext-all-rtl-debug.js?_dc=1463408894669:86438(anonymous function) @ ext-all-rtl-debug.js?_dc=1463408894669:6680(anonymous function) @ ext-all-rtl-debug.js?_dc=1463408894669:7271 localhost/:1 XMLHttpRequest cannot load http://localhost:3000//group-orders/?_dc=1463408898753. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:1841' is therefore not allowed access. The response had HTTP status code 404. Первая это запрос OPTIONS А вот вторая странная. Перевод: Цитата:
Цитата:
|
Решил проблему.
В итоге, если делать запросы с другого домена, то на сервере об этом нужно знать. Сервер должен дать добро. Он должен знать с какого домена идет запрос и выдать на него разрешение. Причем это делается ДВА раза. При запросе OPTIONS:
res.set({
"Access-Control-Allow-Origin": "http://localhost:1841",
"Access-Control-Allow-Headers": "x-requested-with",
"Access-Control-Allow-Methods": "GET,PUT,DELETE,OPTIONS"
});
И при запросе GET:
res.set({
"Access-Control-Allow-Origin": "http://localhost:1841"
});
Примеры кода для сервера у меня даны для Express for Node.js. Иными словами, сервер должен корректно обрабатывать запрос OPTIONS и заголовки прочих запросов начинающиеся на Access-Control-Request-* К сожалению, решение сложное. Так что возвращаюсь к исходному вопросу, как сделать ПРОКСИ? . |
Хотя нет, нашел простое решение для Express for Node.js:
app.use(function(req, res, next) {
let origin = req.get("Origin");
if (_.includes(["http://localhost:1841", "http://172.16.209.1:1841"], origin)) {
res.set("Access-Control-Allow-Origin", origin);
}
next();
});
app.options("*", function(req, res) {
res.set({
"Access-Control-Allow-Headers": "x-requested-with",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS"
});
res.send();
});
Решение кривое (так как это не есть полноценная обработка запросов OTIONS и заголовков Access-Control-Request-*), но проблему исправляет. |
| Часовой пояс GMT +3, время: 11:30. |