I am trying to upgrade my old Polymer application to Polymer v3. Nearly Everything works fine if I use polymer serve.
But I have to also use some php files to connect to the backend and there is the problem.
When I try to run the application using polymer serve, PHP files are not found and returning 404 whenever I try to make a POST request on them.
Non working example. Having the following file structure:
|_ phpFile.php
|
|_ jsFile.js
Inside jsFile.js
fetch("phpFile.php", {
method: 'POST',
headers: new Headers({
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
testData: true
})
}).then(response => {
console.warn(response);
});
When I try to run the application with XAMPP (virtual host), Making a POST request returns exactly what I need, which is great. But import like this:
import {PolymerElement, html} from '#polymer/polymer/polymer-element.js';
stop working, because there is no bundler that would replace # with the current path. And no, I can't simply rewrite it to '/node_modules/#polymer/polymer/polymer-element.js'. All of the polymer elements are using this notation. I would have to rewrite all source codes which is nonsense.
I need to either make successfull POST on php files while serving with polymer serve or replace all # inside imports while serving with localhost (XAMPP or any other service)
Is there anyone who succesfully implemented connection to php file in Polymer 3?
Or anyone who knows some workaround, solution for this?
If You are using PHP for APIs then create separate Application and run it on xampp.
In sort create tow different Application. One for back end (PHP app) and another for front end (Polymer app).
Related
I am starting a new project, Nuxt.js for the frontend and Laravel for the backend.
How can I connect the two?
I have installed a new Nuxt project using create-nuxt-app, and a new laravel project.
As far as I have searched, I figured I need some kind of environment variables.
In my nuxt project, I have added the dotenv package and placed a new .env file in the root of the nuxt project.
And added CORS to my laravel project, as I have been getting an error.
The variables inside are indeed accessible from the project, and im using them
like this:
APP_NAME=TestProjectName
API_URL=http://127.0.0.1:8000
And accessing it like this:
process.env.APP_NAME etc'
To make HTTP calls, I am using the official Axios module of nuxt.js, and to test it i used it in one of the components that came by default.
The backend:
Route::get('/', function () {
return "Hello from Laravel API";
});
and from inside the component:
console.log(process.env.API_URL)//Gives 127.0.0.1:8000
//But this gives undefined
this.$axios.$get(process.env.API_URL).then((response) => {
console.log(response);
});
}
What am I doing wrong here?
I have tried to describe my setup and problem as best as I can. If I overlooked something, please tell me and I will update my question. Thanks.
Taking for granted that visiting https://127.0.0.1:8000/ in your browser you get the expected response, lets see what might be wrong in the front end:
First you should make sure that axios module is initialized correctly. Your nuxt.config.js file should include the following
//inclusion of module
modules: [
'#nuxtjs/axios',
<other modules>,
],
//configuration of module
axios: {
baseURL: process.env.API_URL,
},
Keep in mind that depending on the component's lifecycle, your axios request may be occurring in the client side (after server side rendering), where the address 127.0.0.1 might be invalid. I would suggest that you avoid using 127.0.0.1 or localhost when defining api_uris, and prefer using your local network ip for local testing.
After configuring the axios module as above, you can make requests in your components using just relative api uris:
this.$axios.$get('/').then(response => {
console.log(response)
}).catch(err => {
console.error(err)
})
While testing if this works it is very helpful to open your browser's dev tools > network tab and check the state of the request. If you still don't get the response, the odds are that you'll have more info either from the catch section, or the request status from the dev tools.
Keep us updated!
Nuxt has a routing file stucture to make it easy to set up server side rendering but also to help with maintainability too. This can cause Laravel and Nuxt to fight over the routing, you will need to configure this to get it working correctly.
I'd suggest you use Laravel-Nuxt as a lot of these small problems are solved for you.
https://github.com/cretueusebiu/laravel-nuxt
I'm migrating a site to django, and part of that is some ajax calls to php scripts. All I keep getting back from my ajax calls are the contents of the php file, not the results of the script being executed.
Not sure if this is because I'm only using the django dev server (project not in a folder processed by apache) or if I need url.py and views.py entries for the ajax call...
My ajax call from my js file:
function getLab(labId) {
let data = new Object();
data['ID'] = labId;
$.ajax({
url: "/static/php/fetchLab.php",
type: "get",
data: data,
success: getLabFinish
});
}
And the response is the contents of the php file:
<?php
require('/static/php/log.php');
require('/static/php/config.php');
$log = new Log();
...
For this to work, something must take this PHP script(s) and pass them to an PHP interpreter. Otherwise you receive the script as text, as the server threats them like that. You might have encountered the same effect when you serve PHP files with a webserver that is not configured with PHP properly.
Your guess regarding apache isn't that wrong. You might configure a local apache with the PHP module enabled to receive their desired output.
This approach might be sufficient while migrating, but it is definitely not recommended as a result of your migration.
As a workaround you might also replace the PHP script with dummy output and provide them in the static folder. This way you can already prepare other parts of your application and migrate them later.
As already mentioned you want to end up with corresponding views in your django project.
I agree with what dahrens and Jerin Peter George have said. It definitely sounds like you do not have PHP installed on the server, which wouldn't be needed in a python/django environment. Therefore the ajax request is getting back text from the php file.
I will add some context for you to get an idea of what an ajax request and response would look like in django 2.x
in your javascript (frontend)
$.ajax({
url: '/save/json/',
method: 'POST',
data: {"data":"content"}
})
in your views.py
def save_json(request):
if request.is_ajax():
if request.method == 'POST':
incoming_json_data = json.loads(request.body)
# DO STUFF WITH THE JSON DATA
HttpResponse("OK")
in your urls.py
urlpatterns = [
path('save/json/', views.save_json),
]
I am attempting to create a simple application with laravel and wrapping it in phpdesktop to use locally without the need of a webserver(aside from the built-in php server).
Everything works great except this one thing.
If I launch the app.exe, i get 404's when vue/axios requests data from an endpoint, eg: /api/resource.
However, If I open the app in a browser while running the php server (localhost:8000) the resource is found and loaded correctly.
Is there a way around this? Or is this simply how phpdesktop is supposed to work?
Here are a few relavant settings from 'settings.json'
"web_server": {
"listen_on": ["127.0.0.1", 0],
"www_directory": "www/public",
"index_files": ["index.html", "index.php"],
"cgi_interpreter": "php/php-cgi.exe",
"cgi_extensions": ["php"],
"cgi_temp_dir": "",
"404_handler": "/index.php",
"hide_files": []
},
Cross site ajax request with Vue.js 1.0 and Vue Resource. I get the following error: XMLHttpRequest cannot load http://dev.markitondemand.com/MODApis/Api/v2/Lookup/jsonp?input=NFLX&callback=handleResponse. No 'Access-Control-Allow-Origin' header is present on the requested resource.
I have a basic understanding of the problem but not sure how to add a callback function with the request or if that is the best solution for this example. I put in the full request URL here just to make it easier to follow.
new Vue({
el: '#stockList',
data: function() {
return {
query: '',
stocks: []
};
},
ready: function() {
this.getStocks();
},
methods: {
getStocks: function() {
this.$http.get('http://dev.markitondemand.com/MODApis/Api/v2/Lookup/jsonp?input=NFLX&callback=handleResponse',
function(data) {
this.stocks = data;
}
);
}
}
})
I have almost zero understanding of networking, but I was able to get several remote apis to work using:
this.$http.jsonp
instead of
this.$http.get
"No Access-Control-Allow-Origin" header usually is a problem with the server. It means that the server is configured to only allow a person access to the API if the request comes from the same domain as the server. You either need to run the script from the website that you are requesting data from, or you need to change the server config to allow access to all domains.
If you don't have access to the server, and you don't want to run the script in the browser, then I think what you could do is use a headless browser like PhantomJS to navigate to the page, insert a script element into the dom that contains you script, execute the function and then return the data from the API. I could write the code out for you, but to be honest, it's a bit complex. You would have to know how to use node.js, and phantom.js. I've personally only used phantom.js for the Node 'html-pdf' package, but I'm sure with a little bit of reading you could figure out how to do it.
Set your local environment to http instead of https if you have no control over dev.markitondemand.com.
I am extremely new to using phonegap,codeigniter and jQuery Mobile (My first project) and have currently created an app with jQuery Mobile on the Client side and on the Server side I used the Codeigniter framework to create a RESTful API. Now when I am developing locally the app with in the browser (not yet using phonegap) communicates just fine with the API and no problems occur.
I placed the Codeigniter API on a server yesterday and I am now encountering 2 problems:
The App which was built using jQuery Mobile keeps getting the
following error:
Origin localhost is not allowed by Access-Control-Allow-Origin.
Now I have done some reading up and most people say to use jsonp instead of json and also to use the following on the Server Side:
$CI->output->set_header("Access-Control-Allow-Origin: *");
$CI->output->set_header("Access-Control-Expose-Headers: Access-Control-Allow-Origin");
$CI->output->set_status_header(200);
$CI->output->set_content_type('application/json');
Now my problem is I'm not entirely sure which one is used to fix the problem, weather it is both that need to be implemented etc. If they need to be fixed, how is it done? Is there a place that is well documented that can teach me how to deal with this problem, preferably I would like some where to read up on so I can learn?
The second problem is when I place the jQuery Mobile app into
phonegap and build it for Android. The app fails to get the
data from the server. Now is the reason for this because of the cross
domain error above or is this problem different? I also did some
reading up in this section as well and to my Android config.xml I
added the following code:
But I'm I still can't pull anything from the server. Like I said I'm a bit of a newbie but would really appreciate some help in this matter. Also I am aware that I haven't posted code but based on the comments I'll post which ever code the community needs to help solve this problem, just simply specify which code. Thank you for the help in advance!
About the Access-Control-Allow-Origin problem, I faced the same error and solved by placing this line <?php header('Access-Control-Allow-Origin: *'); ?> in the index.php which is in the root of the project.
This question hasn't been answered 100% but for now thanks to the help of #Niloy Saha, to fix the Access-Control-Allow-Origin error with with the Codeigniter RESTful frame work simply go to your controller in the Controller folder and right at the top paste;
header('Access-Control-Allow-Origin: *');
This then should allow you to communicate from the browser to the server and be able to get a response. After a good for hours of trying I managed to fix my problem. With in the Android project in the res/xml folder there is a file called config.xml. In that file be sure to have the following code:
<access origin="http://10.0.2.2*" subdomains="true"/>
and also make sure you have the following:
<uses-permission android:name="android.permission.INTERNET" />
in your AndroidManifest.xml. For me that seemed to get everything to work
I did similar thing as yours, Zend FW with API on server and jQuery Mobile App.
I've used JSONP, didn't use any Access-Control-Allow-Origin headers.
I have a method in my controller:
function returnData($data) {
header('Content-type: text/javascript');
echo $_GET['callback']. '('. json_encode($data). ')';
die();
}
At the end of API call i use it to return data.
Getting data in jQuery:
$.ajax({
dataType: "jsonp",
url: url,
data: {someparam: 'value'},
success: function(data) { /* ur data is here */ }
});