Webix Jet and Cross-origin resource sharing

Webix JS
1

Hi all

How can i enable Webix Jet to do Cross-origin resource sharing ?

Thanks in advance

2

if you have a problem with Access-Control-Allow-Origin header, then you have to make some adjustments related to CORS on server side.

the rest part is same as normal ajax requests.

3

Hi and thanks for you reply

i tried to follow this link node.js - Why doesn't adding CORS headers to an OPTIONS route allow browsers to access my API? - Stack Overflow and would have found this for example this code :smile:
“var cors = require(‘cors’)
var app = express()
app.use(cors())”

But i don’t know which file i have to change webpack.config.js ? or other

thanks in advance

4

what is your backend (OS, framework)?

5

Hi
i have installed Webix Jet in Ibm i (AS400) that run NodeJs V6.9.1
thanks

6

Hi
I Have tried to insert webpack.config.js file (at the end) this line:
"devServer: { headers: { ‘Access-Control-Allow-Origin’ } } " , but the error remains.

Instead if i insert this line:
"devServer: { headers: { ‘Access-Control-Allow-Origin’: '* ’ } } " ,
when i run npm start, i receive this error:
“devServer: { headers: { ‘Access-Control-Allow-Origin’: '* ’ } }
SyntaxError: Unexpected token :
at Object.exports.runInThisContext (vm.js:76:16)
…”

Thanks …
P.S. where i can find documentation how to customize webpack server?

7 
devServer: {
    ...
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Credentials': 'true' //just in case
    }
}

should work

8

Hi integral …

many thanks for your reply, but the problem remains !!

anyother idea?

thanks in advance

here my complete webpack.config.js

var path = require(“path”);
var webpack = require(“webpack”);

module.exports = function(env) {

var pack = require("./package.json");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var production = !!(env && env.production === "true");
var babelSettings = {
	extends: path.join(__dirname, '/.babelrc')
};

var config = {
	entry: "./sources/myapp.js",
	output: {
		path: path.join(__dirname, "codebase"),
		publicPath:"/codebase/",
		filename: "myapp.js"
	},
	devtool: "inline-source-map",
	module: {
		rules: [
			{
				test: /\\.js$/,
				loader: "babel-loader?" + JSON.stringify(babelSettings)
			},
			{
				test: /\\.(svg|png|jpg|gif)$/,
				loader: "url-loader?limit=25000"
			},
			{
				test: /\\.(less|css)$/,
				loader: ExtractTextPlugin.extract("css-loader!less-loader")
			}
		]
	},
	resolve: {
		extensions: [".js"],
		modules: ["./sources", "node_modules"],
		alias:{
			"jet-views":path.resolve(__dirname, "sources/views"),
			"jet-locales":path.resolve(__dirname, "sources/locales")
		}
	},
	
	devServer: {
	      headers: {
	          'Access-Control-Allow-Origin': '*',
	          'Access-Control-Allow-Credentials': 'true' //just in case
	      }
	  }, 
	
	plugins: [
		new ExtractTextPlugin("./myapp.css"),
		new webpack.DefinePlugin({
			VERSION: `"${pack.version}"`,
			APPNAME: `"${pack.name}"`,
			PRODUCTION : production
		})
	]
	  


};

if (production) {
	config.plugins.push(
		new  webpack.optimize.UglifyJsPlugin({
			test: /\\.js$/
		})
	);
}

console.log('Config--> ' ,  config);

return config;

}

9

Hi

Solved not to take account of my last message

thanks for your time / help

10

Hi giocot,

I guess you want your Jet App (which is served by webpack on port 8080) send AJAX/REST requests to your server running on another port (let’s say 8081) and providing data, that should be displayed in a webix widget. Is this correct? Then you need to change configuration in your server script, not in webpack.

Assuming your server is written in node, a very basic script would be:

var Express = require(‘Express’);
var app = new Express;
// CORS Header
app.use( function(request,response,next) {
response.header(“Access-Control-Allow-Origin”, “*”);
response.header(“Access-Control-Allow-Headers”, “Origin, X-Requested-With, Content-Type, Accept”);
next();
});
// API
app.get(’/endpoint’, function(request,response) { … });
app.post(’/endpoint’, function(request,response) { … });
…
app.listen(8081);