I have searched around on the forums and read some other posts. However, I'm not sure how exactly to go about this. I have a store with a proxy that I'm trying to load with data from a server. I have tried both jsonp and rest for the type of proxy without luck. In both cases I get a 403 forbidden error. followed by an XMLHTTPRequest cannot load error.
Here's the error that I see in the Chrome console:
Here's my code:
Ext.define('EventsTest.store.Venues', {
extend: 'Ext.data.Store',
requires: [
'Ext.data.proxy.Rest',
],
config: {
storeId: 'venuesStore',
model: 'EventsTest.model.Venue',
proxy: {
type: 'rest',
url: 'http://leo.web/pages/api/',
headers: {
'x-api-key': 'senchaleotestkey'
},
limitParam: false,
pageParam: false,
enablePagingParams: false
/*
extraParams: {
latitude: 45.250157,
longitude: -75.800257,
radius: 5000
}
*/
}
}
});
Security policy in browser and desktop is different so even if it fails in browser it can work in phone. But now the question is how to manage while you are developing the app, for that have a look at this similar question :
How to use json proxy to access remote services during development
Regarding that OPTION request which is getting 403 response, try setting withCredentials : false and useDefaultHeader : false. Details here
http://docs.sencha.com/touch/2-1/#!/api/Ext.data.Operation-cfg-withCredentials
http://docs.sencha.com/touch/2-1/#!/api/Ext.data.Connection-cfg-useDefaultHeader
I would suggest you to read more about CORS if you want to use remote services, you may choose to enable CORS on your server.
You're running your app on a local domain "sencha.test", but you're trying to access data on "leo.web" - the error is that you're trying to load data across domains, which isn't allowed via AJAX.
You say that JSONP doesn't work... why not? Does your server return valid JSONP?
Related
Strapi Version: 4.1.5
Operating System: Debian GNU/Linux 9
Database: PostgreSQL 13
Node Version: v14.16.0
NPM Version: 6.14.11
Yarn Version: v1.22.5
Hi everyone, I can’t seem to find consistent information on how to use permissions with a custom plugin in Strapi. I want to make an endpoint available to my front-end (Next.JS) application, but only when the front-end application has authenticated as a user and using the JWT that is returned from authenticating with Strapi. I keep getting a 401 returned.
Here’s what I’m doing:
I used this page to set up authentication in Strapi. I have a user created in Strapi, and from the front-end, I can authenticate and it returns a JWT token. When I set up collection types to only be accessible with the “authenticated” role, I can access those collection types in the api using this JWT token. So all of that works. The problem is that I can’t get this to work with my custom plugin, and I’m not sure why. I still get a 401 error instead.
Here’s how I set up the permissions:
Based on this page, I initially tried to leverage the isAuthenticated permission that the Users & Permissions plugin provides:
{
method: "GET",
path: "/progress",
handler: "memberProgress.getProgress",
config: {
policies: ['plugins::users-permissions.isAuthenticated']
},
},
Unfortunately, this did not work. The server raised an error, saying that this could not be found. So back on the document linked above, I decided to take the approach of creating my own gloabl permission. I created src/policies/is-authenticated.js with the following contents:
module.exports = (policyContext, config, { strapi }) => {
if (policyContext.state.user) { // if a session is open
// go to next policy or reach the controller's action
return true;
}
return false; // If you return nothing, Strapi considers you didn't want to block the request and will let it pass
};
Then, I modified my plugin’s route as follows:
{
method: "GET",
path: "/progress",
handler: "memberProgress.getProgress",
config: {
policies: ['global::is-authenticated']
},
},
This is all based on that document I linked to. Unfortunately, this still does not work. It seems to find the permission (server doesn’t raise an error about it), but when I try to access my plugin’s endpoint with the JWT token, I just get a 401 error.
Here is how I’m trying to access the endpoint on the front-end:
// VERIFIED, auth works and I get the expected jwt
const strapiAuth = await strapiApiAuth();
if ( strapiAuth && strapiAuth.hasOwnProperty("jwt") ) {
try {
const response = await axios.get(
`${process.env.STRAPI_BACKEND_URL}/member-progress/progress?year=2022&name=&pageSize=10&page=1`,
{
headers: {
Accept: "application/json",
Authorization: `Bearer ${strapiAuth.jwt}`
},
timeout: 500,
}
);
console.log(response);
} catch (error) {
// This is where I land with the 401 error
console.log(error);
}
}
Strapi check if you have a valid jwt by default with "authenticated" role, but you must mark the permission to your custom endpoint in "Settings→User & Permission Plugin→Roles" of admin panel also.
I'm using Corsica to handle CORS and I use Axios to send my client-side requests.
I used different browsers on different computers, and the requests all worked fine.
The person I'm making the website for is living in Congo though, and he's getting the following error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://fajalobi.org/saveCoords. This can be fixed by moving the resource to the same domain or enabling CORS. saveCoords "Unhandled promise rejection" Error: Network Error
How is this possible? Are his browsers obsolete? Can I fix this somehow?
Axios request
axios(
{
method: 'post',
url: `${Url.value}/saveCoords`
,
headers: {
'X-Requested-With': 'XMLHttpRequest',
'x-csrf-token': document.head.querySelector("[name~=csrf-token][content]").content
}
,
data: {
coords: coords,
name: name,
label: label,
surface: surface
}
Router
pipeline :browser do
plug :accepts, ["html"]
plug :fetch_session
plug :fetch_flash
plug :put_secure_browser_headers
plug FajalobiWeb.Plugs.Locale
plug FajalobiWeb.Plugs.Auth, repo: Fajalobi.Repo
plug Corsica,
origins: "*",
log: [rejected: :error, invalid: :warn, accepted: :debug],
allow_headers: :all,
allow_methods: :all,
allow_credentials: true
plug :protect_from_forgery
end
I am using Ionic native http to make server requests. The server is hosted on aws and the apis are up and running (verified by postman).
When i do ionic serve the requests go through and work but when i try to run it on device it doesnt work. On inspection i get "net::ERR_CLEARTEXT_NOT_PERMITTED" and post is sent as OPTIONS
ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "http://18.220.143.133/api/login", ok: false, …}
already tried adding to config.xml
login(user: User): Observable<AuthResponse> {
return this.httpClient.post('http://18.220.143.133/api/login', user, {
headers: new HttpHeaders().set('Content-Type', 'application/json'),
}).pipe(
tap(async (res: AuthResponse) => {
if (res.success == true) {
await this.storage.set('user',res.user);
await this.storage.set('ACCESS_TOKEN', res.token);
this.authSubject.next(true);
}
})
);
}
I expect http requests to go through from mobile devices as well.
The same happened to me, until in the config.xml file I added:
<preference name = "android-targetSdkVersion" value = "27" />
It has to do with your CORS for the API call. This may help. Also, since you're using Angular HTTP requests, check here HTTP request from angular will send with method OPTIONS instead of POST.
I am writing a NodeJS application which is supposed to get deploymentstatuses from the Kubernetes API using the websocket transport layer.
For this I use the socket.io-client module and I connect with the following snippet:
var url = 'wss://myurl:8443?watch=true&access_token=myaccesstoken';
var socket = ioClient.connect(url, {
reconnect: true,
transports : ['websocket'],
path : "/api/v1/namespaces/mynamespace/replicationcontrollers",
secure : true,
rejectUnauthorized: false,
verify : false});
This however gives me an unexpected error, 403. Testing this in extensions like Websocket Client to Chrome works perfectly fine. Also I receive a 200 if I try a path with less sensetive data, but not an upgrade to websocket.
I read somewhere the Kubernetes API doesn't treat the WebSocket-protocol correctly, perhaps this is related? I have also tried with other more native libraries to Node such as websocket and ws with the same result.
When adding a ?watch=true in a Kubernetes API call, the request does not use WebSocket's but instead will stream / chunk the response over the HTTP connection.
I have a rest API running on localhost:8001/my_app/api/, and I have apache setup to reverse proxy it from localhost/my_app/api. That's working fine.
In order to have permissions to do anything with the api, it requires my session cookie, my csrftoken cookie and a X-CSRFToken HTTP header. I've configured adapters/application.js as follows:
adapters/application.js
import Ember from 'ember';
import DRFAdapter from './drf';
export default DRFAdapter.extend({
headers: Ember.computed(function() {
return {
'X-CSRFToken': Ember.get(document.cookie.match(/csrftoken\=([^;]*)/), '1'),
};
}).volatile(),
ajax: function(url, method, hash) {
hash = hash || {}; // hash may be undefined
hash.crossDomain = true;
hash.xhrFields = {withCredentials: true};
return this._super(url, method, hash);
}
});
If I do a ember build -prod and copy the contents of the dist dir to /var/www/myApp/, apache serves my app, and it works just fine.
It's when I try to use ember-cli's builtin development server where I run into problems. I'm getting 403 errors from my api. It turns out that while the X-CSRFToken header is being sent neither of my cookies are. If I look in my chrome developer tools, it shows that I have both cookies - they simply aren't in the request headers. They're both from localhost, so I'm a bit confused.
Also, I currently I have CORS on my rest backend setup. Here are the headers I'm currently receiving:
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:4200
I thought that since allow-credentials == true and allow-origin != * that cookies were supposed to be allowed. sigh.
Here's my API_HOST and contentSecurityPolicy:
config/environment.js
if (environment === 'development') {
ENV.APP.LOG_TRANSITIONS = true;
ENV.APP.API_HOST = "http://localhost"
ENV.contentSecurityPolicy = {
'default-src': "'none'",
'script-src': "'self' 'unsafe-eval' localhost",
'font-src': "'self'",
'connect-src': "'self' localhost",
'img-src': "'self'",
'style-src': "'self'",
'media-src': "'self'"
};
}
As you can see above, the api requests are being sent through my reverse proxy. I've played around with ember serve --proxy trying both http://localhost:80/ and http://localhost:8001/ but neither have helped. I've also tried setting my development ENV.API_HOST = 'http://localhost:8001/'; with and without the various proxy values.
This edit, build, deploy, refresh my browser, test, & repeat process is REALLY slow and getting old REALLY fast.
Could someone please explain to me how to get the ember-cli development server to properly access my rest api?