`Getting CORS issue in Angular, for API calls because my portal(angular) and API's are deployed in two different host(domains).
From Backend they don't restrict cross origins. Allow all origins, methods, headers, credentials and Age.
From UI we was using the following code inside grapgQL-module`
`import { ApolloModule, APOLLO_NAMED_OPTIONS } from 'apollo-angular';
import { ApolloClientOptions, InMemoryCache } from '@apollo/client/core';
import { HttpLink } from 'apollo-angular/http';
export function createNamedApollo(httpLink: HttpLink): Record<string, ApolloClientOptions<any>> {
return {
clientInfo: {
name: 'clientInfo',
link: httpLink.create({ uri: dashboardUrl,withCredentials: true,
}),
cache: new InMemoryCache({ addTypename: false }),
version:'3.4.17'
},
@NgModule({
exports: [ApolloModule],
providers: [
{
provide: APOLLO_NAMED_OPTIONS,
deps: [HttpLink],
useFactory: createNamedApollo
}
],
})
export class GraphQLModule {
}`
Following are the details of angular and dependencies version
`"@angular/common": "14.2.7",
"@angular/compiler": "14.2.7",
"@angular/core": "14.2.7"
"@apollo/client": "3.4.17",
"apollo-angular": "4.1.0",
"graphql": "15.4.0",`
`I want to allow cross origin from Front-end(Backed allowing all the possible ways ) to avoid CORS issue . getting the below error while making API call
from origin 'URL' has been blocked by CORS policy: Request header field apollographql-client-name is not allowed by Access-Control-Allow-Headers in preflight response`
