Seems so simple from examples I see on the web but when I try to load a local json file from my Angular 2 application inside my service.ts, I get a 403 forbidden error. My application runs inside a Servicestack selfhosted service. Works fine when I do a request like http://localhost:8087/customers/ but the same data inside a local json file in my app directory will not (http://localhost:8087/app/customers.json)
What do I have to do to allow my application to access that file?
this._http.get('app/customers.json').toPromise()
.then(function (response) {
console.log(JSON.stringify(response))
}).catch(this.handleError);
Suggestion from #mythz fixed my issue.
I added this line in my appHost file.
HostConfig.Instance.AllowFileExtensions.Add("json");
Related
I have React app in which I am trying to get language options set up using i18next http backend. However it seems that when the call is made to get the json file it is not returned correctly.
My json files are stored in the Public folder in a subfolder locales and the call to fetch these is made:
backend: {
loadPath: "/locales/{{lng}}/translation.json",
},
Looking at the network tab I am getting 200:
But if I put that URL directly into the browser I get the app navbar and an empty page as if it is loading an instance of the app, rather than grabbing the json file.
How do I get around this?
This was resolved by creating a .env file in the root of the project and adding the line PUBLIC_URL=sub_folder where subfolder was where my app was.
I have an json file in the public folder, to which after starting the application I make a request to it. When I load the application from a port on which I hosted it, everything is fine, but when I change the port with some url (test.project.bg) this json file does not build or somehow does not find the way to it.
Uploading files using antd Dragger component, everything works fine but when I upload the files, I get Proxy status in response instead of file? What does proxy here represent?
I am using this example https://ant.design/components/upload/#components-upload-demo-drag. Why am I not getting file in response directly?
Based on #29614
Upload should always return new file proxy.
If you need to object install for example antd#4.9.1. Then it returns object to you.
I am using ngf-file-upload module to upload file through angularjs and laravel.
This is my html initiatior :
<div class="button" ngf-select="profile.uploadFiles($file, $invalidFiles)">Upload on file select</div>
This is my controller in angular
vm.uploadFiles = function(file) {
if (file) {
file.upload = Upload.upload({
url: 'http://localhost/api/uploadImg',
data: {file: file}
});
}
}
This is my upload API code in Laravel.
public function uploadImg()
{
$data = Input::file('file');
return $data;
}
My angular app is running on 9000 port and laravel in default port.
The request from angular is hitting the api built in laravel but the thing is that it's missing the file. Although my request header looks suspicious in Browser's Network. Like content-type is not multipart/form-data
This is the link of danial farid js fiddle
I am using the same code, with alterations to sync with my api, that is mentioned in the fiddle.
The strange is thing that when i am giving my local API path to this fiddle then it is working fine. But it's not working on my project locally. I think there is something that i am missing on my angular side.
This is the image of param that is send when i am trying to upload file from local project
This is the image of param that is send when i am trying to upload file from fiddle to my api
My Conclusion
There is no problem in the code because I am able to upload the file from a html file( not in my angular project) that is specifically i have created to test file uploading and it's running.
BUT
It's failing when i am trying to upload through my project.
I have attached the images of my console one case is working one(uploading image through random file) and other is not working case (where i am uploading file through my project).
I don't what to do next. I think there is something in my angular project that is creating a obstacle in my uploading process.
Interceptors
Yes, they were creating problem in file upload because we have set headers in interceptors
and the default headers we have set in interceptors
config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
For every request that has been made from our angular app is going through the interceptor and the interceptor was modifying every request with these headers. So i Have to remove this header from the interceptor.
Note
Don't forget to add the removed header in every other request
This is my scenario:
XMLHttpRequest cannot load http://phi.dev/api/login. Redirect from 'http://phi.dev/api/login' to 'http://localhost:8100/' has been blocked by CORS policy: Request requires preflight, which is disallowed to follow cross-origin redirect.
I have a Aungular2/Ionic 2 App on local and a Laravel Web API for authenticating user.
if I call this Web API from my Angular2 Module, I get an exception as given above.
Note: In Chrome Network, I could my angular service is being called 2 times. First with Request Method: OPTIONS and second time with Request Method: Get, which returns Http 302.
Does anyone know how to resolve this issue.
Thanks in advance.
Because the request is external and because you are serving the application locally you will have CORS issues.
To avoid such issues locally (when using ionic serve), you have to setup a local proxy in the ionic configuration files.
Check your Ionic 2 project directory and locate the file ionic.config.json: it usually is in the root directory of the project (and need to be there, along with package.json and so on).
Open the file, and add this (do not forget to be SURE that the line BEFORE that one ends with a comma (,), since it's a json file):
"proxies": [
{
"path": "/server",
"proxyUrl": "http://phi.dev"
}
]
Now, in the section where are you are performing the HTTP request, replace the http://phi.dev with /server. I will give you an example here.
I do recommend you, however, to be aware that such edit will make your compiled app to NOT work, so you likely want to put a debug flag for testing and compiled environments, like this:
class MyServiceOrComponent {
private debug: boolean = true; // Set this flag to FALSE when you need to actually compile the app for any real device.
private server: string = this.debug ? "/server" : "http://phi.dev";
constructor(private http: HTTP) {
const login = "/api/login"; // don't to it exactly like that, make a static list or something like this to store paths.
let request = this.http.get(this.server + login).then((res) => {
console.log(res);
});
}
}
What happens, explained briefly, is that if you perform the HTTP request as "localhost" it will throw you an exception (because of the CORS policy). Such will happen only when you are running the application in your testing environment (localhost). To avoid such, you provide a proxy, so that the request will be valid.