I'm building my first app with Ionic and I'm using Django Rest Framework as API.
I just want to create a simple page in Ionic that shows a list of categories.
I've created the model Category, and the ViewSets for the API. When I go to the Django-rest-framwork viewer (http://localhost:3010/category/) everything works fine.
But when I try to get the results (with Ionic) I get this error:
XMLHttpRequest cannot load http://localhost:3010/category/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.
My code:
import {Page, Platform, NavController} from 'ionic/ionic';
import {EmployeeDetailsPage} from '../employee-details/employee-details';
import {Http} from 'angular2/http';
#Page({
templateUrl: 'build/pages/getting-started/getting-started.html'
})
export class GettingStartedPage {
constructor(platform: Platform, nav: NavController, http: Http) {
this.platform = platform;
this.nav = nav;
this.http = http;
this.http.get("http://localhost:3010/category/")
.subscribe(data =>{
this.items=JSON.parse(data._body).results;//Bind data to items object
},error=>{
console.log(error);// Error getting the data
} );
}
}
You need to send CORS headers to Ionic Framework to let cross-domain ajax work, since your ionic app is hosted on port 8100, and django-server is running on port 3010, this is considered a cross-domain request.
For django, install CORS headers app through pip.
In your settings, enable 'corsheaders' app, and also add the allowed urls.
# this disables Cross domain requests
CORS_ORIGIN_ALLOW_ALL = False
# this allows cookie being passed cross domain
CORS_ALLOW_CREDENTIALS = True
# this is the list of allowed origins for cross domain ajax
CORS_ORIGIN_WHITELIST = (
'localhost:8100',
)
You may need to install CORS.
If you are testing on chrome you might also need to allow cross origin (There is an extension for it) which should get you around the CORS issue.
Related
I have a frontend vue site hosted on google's firebase with the url (https://front-end.web.com) , while my flask backend is hosted on heroku with the url (https://back-end.heroku.com). This makes my session not to persist across requests, I tried fixing this by implementing CORS on my backend, but for some reason it's not working , below are snippets of my code to show my implementation
config_class.py
class ConfigClass():
CORS_ALLOW_HEADERS = ['Content-Type']
CORS_ORIGINS = ['https://front-end.web.com']
SECRET_KEY = os.environ.get("APP_SECRET_KEY")
SESSION_TYPE = 'redis'
_init.py
from flask import Flask, session
from flask_session import Session
from flask_cors import CORS
from root_folder.config import ConfigClass
db = SQLAlchemy()
migrate = Migrate()
ma = Marshmallow()
sess = Session()
def create_app(ConfigClass):
# initiate the flask app and assign the configurations #
app = Flask(__name__)
app.config.from_object(config_options[config_class])
sess.init_app(app)
from root_folder.clients import clients_app
# register all the blueprints in this application
app.register_blueprint(clients_app)
CORS(app, supports_credentials=True)
# return the app object to be executed
return app
app.py
from root_folder import create_app
app = create_app()
Procfile:
web: gunicorn -w 1 app:app
axios front end request
let formData = new FormData();
formData.append("email", email);
formData.append("password", password);
axios.post(
backendUrl+'create_client_account',
formData,
{
withCredentials: true,
headers:{
"Content-Type": "multipart/form-data"
}
}
);
create client route ( I have stripped this code block to the bare minimum to make it understandable):
from flask import session
# route for creating account credentials
#bp_auth_clients_app.route("/create_client", methods=["POST"])
def create_client():
username = request.form.get("username").lower()
email = request.form.get("email").lower()
# create account code goes here #
auth_authentication = True
session["auth_authentication"] = auth_authentication
req_feedback = {
"status": True,
"message": "Account was successfully created",
"data": feedback_data
}
return jsonify(req_feedback), 200
After the account is successfully created, I am unable to access the session value in subsequent requests, it returns None.
To recreate the problem on my local server, I access the front-end via the domain "localhost:8080" , while I access the flask server via "127.0.0.1:8000" . If I change the front end domain to "127.0.0.1:8080", I don't usually have any problems.
Kindly advice on what to do.
Thanks to Ahmad's suggestion, I was able to resolve the issue using custom domains for both my frontend and backend as follows:
frontend.herokuapp.com -> customDomain.com
backend.herokuapp.com -> api.customDOmain.com
finally I added the line below to my session config:
SESSION_COOKIE_DOMAIN = ".customDomain.com"
And all was well and good.
Sessions use cookies:
On session creation the server will send the cookie value in the set-cookie header. It doesn't work for you because of cross origin issue.
It works fine for you when you use 127.0.0.1 because 127.0.0.1:8080 and 127.0.0.1:8000 are the same origin so the browser accepts the set-cookie header and do set the cookie no problem.
Cookies are sent in the header on each request and your server loads the session from Redis by cookie value (The cookie value is called session_id).
How it gets inserted => Normally your session gets serialized and inserted in Redis with the cookie hash as Key in the end of the request life cycle.
If you want to keep using sessions and cookies you need to find another solution for your deployment to so that your backend and frontend have the same hostname.
If you can't do I'd recommend to read about JWT (Json-Web-Tokens).
EDIT
You can send the session id in your response body and save it in local storage.
Then you need to configure:
frontend set the session id value it in the Authorization header base64 encoded.
Backend base64 decode Authorization header value from request and check for the session in Redis, if exists load it.
EDIT
How to deploy both backend/frontend on same hostname using apache:
using apache you need to create 2 virtual hosts one for backend and the other for frontend listening on different ports then configure your web server deployment to use the backend VH if the path is prefixed by /api/ and use the frontend Virtual host for anything else.
This way any request you make to your api your backend will handle it otherwise it'll serve your frontend app.
This is just a way on how to do it there is plenty others
Check this question.
I'm getting the error
Access to fetch at 'http://hpap-dev.pmacs.upenn.edu:5801/get-categories' from origin 'http://hpap-dev.pmacs.upenn.edu:5802' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
despite using flask_cors. My flask app and route look like this
#Start flask app
app = Flask(__name__)
#Open flask for querying from domains outside of the app
CORS(app)
<snip>
#app.route('/get-categories')
#cross_origin()
def get_categories():
frame_dict = file_cat_wrangle.get_wrangle_dict()
# orig
# return jsonify(response=frame_dict)
# stauffer - try this to resolve CORS problem
response = jsonify(response=frame_dict)
response.headers.add('Access-Control-Allow-Origin', '*')
return response
As you can see, the code's calling CORS(app) as well as #cross_origin() under the route. And I also tried adding the Access-Control-Allow-Origin header explicitly to the response, per another stackoverflow post.
I've rebuilt and restarted the flask server. AFAIK this used to work on this server (I've taken over this project at work and am pretty new to web dev). Other API calls that go between the front-end (node server) and back-end (the flask app) are working. I also checked that the route path and the call to it are identical.
Here's the call from the front end:
export const fetchCategories = () => {
return fetch(`${flask_url}/get-categories`)
.then(response => {
if (response.status >= 400) {
throw new Error(`${response.status}: ${response.statusText}`);
}
return response.json();
}).then(categories => categories);
}
Any suggestions??
Check if the header is really present in the network tab in your browser.
You can use hooks to enable cors as below:
#app.after_request
def after_request(response):
response.headers['Access-Control-Allow-Origin'] = '*'
return response
Turns out it was not actually a CORS-related error but some kind of odd error response. See my comment to the original question.
I made an Angular application able use an online api to get a json and do stuff.
But, although the json is the same, if I try to change only the url of the json by setting a local url of a server written in django, angular would seem not to connect anymore ...
My question is, why if with an online cloud server works, with a local one wouldn't?
I tried making this server "on cloud" opening the router's port, also setting up a ddns, and using postman or a browser it seems to work, but when i try to connect with angular it still doesn't get the data...
I am sure 100% that the server answer, with the right json data, because django prints on console that he received a HTTP GET request :
http://i.imgur.com/TIQnIcR.png
I remind you that the HTTP angular request worked with another api, but i will still show up some code :
export class ProdottoService {
private prodotti: Array<ProdottoModel>;
constructor(private httpClient: HttpClient) {
this.prodotti = new Array<ProdottoModel>();
var url:string = "https://gist.githubusercontent.com/saniyusuf/406b843afdfb9c6a86e25753fe2761f4/raw/523c324c7fcc36efab8224f9ebb7556c09b69a14/Film.JSON";
var local_url:string = "http://127.0.0.1:8000/films/?format=json";
httpClient.get(local_url)
.subscribe((films : Array<Object> ) => {
films.forEach((film => {
this.prodotti.push(new ProdottoModel(film));
}));
}
);
}
getProdotti(): Array<ProdottoModel> {
return this.prodotti;
}
}
Result using external api :
http://i.imgur.com/MT7xD9c.png
Thanks in advace for any help :3
-- EDIT -- IS A CORS ISSUE
In django settings.py file :
CORS_ORIGIN_WHITELIST = (
'localhost:8000',
'127.0.0.1:4200'
)
INSTALLED_APPS = (
...
'corsheaders',
...
)
MIDDLEWARE = [ # Or MIDDLEWARE_CLASSES on Django < 1.10
...
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
...
]
But i don't know if there's a way to set-up CORS settings in Angular
Based on feedback, this is a CORS issue. Your Django server is getting the requests and responding because localhost is an implicitly trusted domain in Django's dev environment, but it isn't configured properly to set the cross origin header, so the browser is not allowing your app to see the response because the server hasn't authorized the domain explicitly.
The problem here is that you've set CORS white list like this:
CORS_ORIGIN_WHITELIST = ( 'localhost:8000', '127.0.0.1:4200' )
it needs to be like this:
CORS_ORIGIN_WHITELIST = ( 'localhost:4200' )
angular runs on localhost, not 127.0.0.1, even though that's what localhost is an alias for, your browser still differentiates them for CORS. Also, you do not need to whitelist the domain your serving off of, that's not crossing any origin as it's the same origin.
In your screenshot, it looks like the response is type "document..." something. The simplest fix, with only the code here, is to convert the string to JSON.
JSON.parse(films)
This is the wrong answer, because it's being set to that because of the CORS issue in the other answers.
I have a django api (djangorestframekwork, django2.1, python 3.6) that I run locally - http://127.0.0.1:8000/api/cards/b361d7e2-6873-4890-8f87-702d9c89c5ad. This api seems to work well. I can hit it via the web api or use curl/requests to add to or view the database.
Now, I want to be able to have my React project hit this api. I can have my react project hit a different api and it returns the data, but when I replace that URI with my own URI it breaks.
App.js - there is one line commented out. Switch that out with the other to switch between the public and private api.
import React from 'react'
import keyforge from '../api/keyforge'
import localhost from '../api/localhost'
import SearchBar from './SearchBar'
class App extends React.Component {
onSearchSubmit = async (term) => {
const response = await localhost.get("api/cards/" + term)
//const response = await keyforge.get("api/decks/" + term)
console.log(response)
}
render () {
return (<div className='ui container'>
<SearchBar onSubmit={this.onSearchSubmit} />
</div>)
}
}
export default App
keyforge.js - this one works!
import axios from 'axios'
const proxyurl = 'https://cors-anywhere.herokuapp.com/'
const url = 'https://www.keyforgegame.com/'
export default axios.create({
// baseURL: 'https://www.keyforgegame.com/api/decks/'
baseURL: proxyurl + url
})
localhost.js - this one does not work
import axios from 'axios'
const proxyurl = 'https://cors-anywhere.herokuapp.com/'
const url = 'http://127.0.0.1:8000/'
export default axios.create({
baseURL: proxyurl + url
})
Error message:
GET https://cors-anywhere.herokuapp.com/http://127.0.0.1:8000/api/cards/b361d7e2-6873-4890-8f87-702d9c89c5ad 404 (Not Found)
Uncaught (in promise) Error: Request failed with status code 404
at createError (createError.js:17)
at settle (settle.js:19)
at XMLHttpRequest.handleLoad (xhr.js:78)
On my computer - http://127.0.0.1:8000/api/cards/b361d7e2-6873-4890-8f87-702d9c89c5ad takes me to the Django api page for that specifc element. If I get rid of the cors-anywhere url I get this error -
Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/cards/b361d7e2-6873-4890-8f87-702d9c89c5ad' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I have this cors-anywhere url prepended to it to solve the No Access-Control-Allow-Origin error that you see when I hit this to the public api. Since I get the same error when I hit my own private api, I am using the same solution (e.g. the cors-anywhere url prepeneded to my url.
Thoughts?
Probably because you didn't enabled CORS on your django rest project. There is a tool called django-cors-headers, Install it via pip install django-cors-headers, add it's midlleware and enable it in your settings.py file.
pip install django-cors-headers
then add it to installed apps:
INSTALLED_APPS = (
...
'corsheaders',
...
)
add it's middleware:
MIDDLEWARE_CLASSES = (
...
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
...
)
and finally add this variable in the end of your settings.py file:
CORS_ORIGIN_ALLOW_ALL = True
Find out more about it here: django-cors-headers on github
Your keyforge.js file works because you're hitting an already hosted website which has CORS enabled at it's backend as well. You need to add CORS at your Django backend as well. From what you've said, it seems that you've only added it at the front end. Probably something like could help you.
How can I enable CORS on Django REST Framework
I exposed API in Django backend. I want to get that API request from Angular 7. so I implemented the code that
this.HttpClient.get('Http://127.0.0.1:8000/myapp/posts')
.subscribe(
(data:any[]) => {
console.log(data)
}
)
But I'm getting an error that
Access to XMLHttpRequest at 'http://127.0.0.1:8000/myapp/posts' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}error: ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: "error", …}headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}message: "Http failure response for (unknown url): 0 Unknown Error"name: "HttpErrorResponse"ok: falsestatus: 0statusText: "Unknown Error"url: null__proto__: HttpResponseBase
Could anyone suggest any solution to solve this error?
When sending HTTP requests from your front-end application, using the browser's fetch API, the Axios client or the jQuery $.ajax() method (a wrapper for the JavaScript XHR interface), to your back-end API built with Django REST framework the web browser will throw an error related to the Same Origin Policy.
Cross Origin Resource Sharing or CORS allows client applications to interface with APIs hosted on different domains by enabling modern web browsers to bypass the Same origin Policy which is enforced by default.
Ref how to do it here: https://www.techiediaries.com/django-cors/
you need to add a middleware file app/cors.py:
class CorsMiddleware(object):
def process_response(self, req, resp):
response["Access-Control-Allow-Origin"] = "*"
return response
This will add an Access-Control-Allow-Origin:* header to every Django request but before that you need to add it to the list of middleware classes:
MIDDLEWARE_CLASSES = (
#...
'app.CorsMiddleware'
)
Then install the django-cors-headers
Start by installing django-cors-headers using pip
pip install django-cors-headers