Currently in the process of developing an API utilizing our API server script and attempting to establish communication with the API on the IONIC framework application. Progress is being made, however, encountering a recurring issue with the cross-origin blocked error:
Working on a local development environment using ionic serve or ionic run/emulate -l -c with livereload activated, Ionic sets up a local server on port 8100 by default (http://localhost:8100/). The origin at this point is localhost:8100, which leads to external services with CORS enabled considering the request as untrustworthy and rejecting it.
As per recommendations from Ionic themselves (), one can establish a proxy alias within the Ionic application to redirect API calls, thus bypassing the origin issue. Nevertheless, their instructions were specific to Ionic 1, so here's an updated version for Ionic v2.
Edit ionic.config.json and incorporate the following proxies configuration.
{
"name": "project-name",
"app_id": "xyz-projectid",
"v2": true,
"typescript": true,
"proxies": [{
"path": "/api",
"proxyUrl": "https://the-real-api-host.com"
}]
}
In this scenario, we are establishing a route within the Ionic app at /api, where requests will be forwarded to the endpoint https://the-real-api-host.com. If you wanted to utilize a different API endpoint like http://my-custom-api.com/api/v2/, you could substitute it within the proxyUrl field.
You must now update all references of the base URL for the API endpoint from https://the-real-api-host.com to /api in your app code. Calls to /api should be intercepted when working with Ionic serve, and redirected to the actual address.
Every project's implementation may differ. In my situation, I didn't have authority over the API since it was an external service, preventing me from managing CORS responses.
Note: Remember to restart the server (ionic serve) or else you'll encounter 404 errors from your API calls due to them not being proxied yet.
If you find yourself unable to modify the server configuration, it is recommended to utilize the Http native plugin for conducting Http requests on your mobile device in order to avoid cors issues. However, when working in a web environment, Angular's HtttClient must still be used. Thankfully, by incorporating the ionic-native-http-connection-backend library, you can employ the same HttpClient service across both environments, with Http native being utilized internally if the application is running on a mobile device. This setup serves as a convenient wrapper.
If you encounter CORS issues while running Ionic on a device, particularly on iOS with WKWebView, creating a proxy will not solve the problem. In such situations, it is recommended to use Cordova's native HTTP plugin instead.
For more information and a practical solution to CORS problems in Ionic 3 and Cordova, check out this resource:
When facing this problem in the development stage, a helpful solution is to add the "Allow-Control-Allow-Origin" extension to your Chrome browser.
To resolve a CORS error, server-side intervention is necessary. Although there are browser extensions available to address the issue temporarily, the ultimate fix must come from the server side for all devices.
After trying several options, I found that utilizing the ionic-native http library was the most effective solution for me. You can explore its implementation by visiting this link:
I am in the process of developing a JavaScript library that consists of a central core module and multiple optional submodules that enhance the functionalities of the core module. This library is specifically designed for the browser environment, utilizing ...
My XPage only relies on 2 js imports - one being JQuery and the other dependent on JQuery specifically for smart companies search in the Russian Federation. However, a challenge arises when trying to import the second library as it causes the entire page t ...
Is there a way to upload multiple files in TypeScript without using React or Angular, but by utilizing an interface and getter and setter in a class? So far I have this for single file upload: <input name="myfile" type="file" multi ...
When I receive a query string in one of my REST endpoints using koa-router, each value of the query string object parameter is always a string: { count: "120", result: "true", text: "ok" } Within my codebase, I have an Interface that represents the ...
After some observation, I came to understand that simply inserting <iframe src=remote-page-here></iframe> will not work as expected. Interestingly, the website twiddla does not use flash either. I am intrigued by how they achieve the in-place b ...
Is there a way to accurately count dropped items within a dropped area? I have created an example that seems to be working fine but with one minor issue. When I begin removing items, the count does not include the first item and only starts decreasing afte ...
Hey there! I've got a web service set up like this: [WebMethod] public bool SyncGeneralDataToServer(string macaddress, string userid, string password, string computername, string ...
Within my loop through a dataset, I am working on determining the setup of folders for a href link. Currently, I have an ng-if statement for each option, but I am facing an issue with checking one of the ng-ifs. Specifically, I need to check if a value is ...
Currently utilizing the useQuery function from react-query. I am interested in determining the duration between when the query was initiated and when it successfully completed. I have been unable to identify this information using the return type or para ...
I'm currently designing a website for booking reservations through an HTML form, with data submission to firestore. Upon submission, a confirmation email is sent to the customer. Below is the code snippet I am using to achieve this: var firestore = fi ...
After making an API call, I have received an array response that includes the following information: [ { "IsDatalakeEnabled": true, "RecoveryHr": { "IsRecoveryHREnabled": false, &quo ...
I am a beginner in the world of node.js and attempting to execute this piece of code: var eventlib= require('events'); var emitter= new eventlib(); eventlib.addListener('MessageEvent', function() { console.log('Registered the ...
Encountering a LogCat error that I need assistance with. The web app code functions properly on iOS, but presents an error message on Android. Unable to call getDuration as mediaplayer is invalid Your help is greatly appreciated. ...
$(function(){ $(window).scroll(function () { var scrollVal = $(this).scrollTop(); var adscrtop =$(".header").offset().top // 在 RWD 767以下不作動 if(window.screen.width>767){ if(sc ...
I have been working on styling a React project where App.js mainly handles routing and navigation to its components: App.js import {useState, useEffect} from 'react'; import Models from './pages/Models'; import Loadingpage from ' ...
My datepicker saves the selected date without the time in my database, but when I display it, it shows one day ahead. After researching the issue, I found that it's a timezone problem encountered by many people. However, I am not sure how to resolve i ...
I prefer my popup to have a dark or blurred background when active. The popup itself should remain the same, with only the background being darkened. I would like a dark layer overlaying the entire page. This script should be compatible with any website wh ...
I have a situation where I need to query a list of items and only retrieve the ones that correspond to a specific ID in the provider_cost_dict. Essentially, if I input providerId = 10001, then only the items with a matching entry in the provider_cost_dict ...
Currently, I have a fabric.JS canvas where objects can be added. However, I am interested in clipping these objects into an oval shape, similar to the clip demos on fabricjs.com. In my current project (JSFiddle), I have been able to crop the object into a ...
When developing my application, I encountered an issue with setting a custom view to a dialog. Despite following the code below, the app kept showing a ForceClose error in LogCat. The Code Snippet : if (!isPremium) { count = prefsUtils.getFro ...