I host my code on digitalocean
Frontend use Nuxt js and Backend use Laravel
I test api using postman backend api ok
Error: strict-origin-when-cross-origin
modules: [
// https://go.nuxtjs.dev/axios
'#nuxtjs/axios',
'#nuxtjs/sitemap',
'#nuxtjs/proxy',
],
axios: {
proxy: true,
prefix: 'http://api.mydomain.com/api'
},
proxy: {
'/api/': 'http://api.mydomain.com/api',
},
Related
Have really been struggling with CORs lately, and finally got a combination that works. However based on all of the documentation I have read, it should NOT work.
From the "Configuring CORS" documentation on Apollo GraphQL:
Pass the credentials option e.g. credentials: 'same-origin' if your
backend server is the same domain, as shown below, or else
credentials: 'include' if your backend is a different domain.
Since my front end is on EC2 and Backend is on Lambda, they are on different origins no?
My stack:
Frontend: Apollo Client / NextJS (hosted on EC2) ex: http://mysite.io
Gateway: AWS API Gateway ex: https://XXXXXXXXX.execute-api.us-east-1.amazonaws.com/dev/graphql
Backend: Apollo Server GraphQL (hosted on Lambda)
Note: the below code works.
Frontend:
const link = createHttpLink({
uri: process.env.API_URL,
credentials: 'same-origin',
headers: {
'x-api-key': process.env.API_KEY
}
});
Gateway Settings:
Backend:
exports.handler = server.createHandler({
expressGetMiddlewareOptions: {
cors: {
origin: true,
credentials: true
}
},
});
But if I change my credential value to 'include' on the apollo client (front end)...
We run into the following preflight error:
Response to preflight request doesn't pass access control check: The
value of the 'Access-Control-Allow-Origin' header in the response must
not be the wildcard '*' when the request's credentials mode is
'include'.
i'm using Uppy file uploader how to send files from the the endpoint to upload files in parse server
Frontend App.js
.use(XHRUpload, {
endpoint: 'http://localhost:1337/parse',
formData: true,
fieldName: 'files[]',
})
I have a problem with CORS in my API gateway lambda proxy. I was trying to struggle with this but still, I get No 'Access-Control-Allow-Origin' header is present on the requested resource or Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I use apollo client on frontend where I put 'Access-Control-Allow-Origin': '*', header:
const authLink = setContext((operation, { headers }) => {
const token = window.localStorage.getItem('accessToken');
return {
headers: {
...headers,
authorization: `Bearer ${token}`,
'Access-Control-Allow-Origin': '*',
}}}
Next, as a proxy, I use 'apollo-server-lambda' where I have below handler config:
const handler = server.createHandler({
expressGetMiddlewareOptions: {
cors: {
origin: '*',
credentials: true,
},}});
My graphql API gateway invokes some lambdas, every lambda is wrapped in below wrapper:
export const middyfy = (handler: any) => {
return middy(handler).use(middyJsonBodyParser()).use(cors());
};
My graphql proxy serverless configuration looks that:
events: [
{
http: {
method: 'post',
path: '/',
integration: 'lambda-proxy',
cors: true,
},
},
{
http: {
method: 'get',
path: '/',
cors: true,
integration: 'lambda-proxy',
},
},
],
My API gateway OPTIONS configuration:
I will be glad for any help
Problem solved, browser message was confusing.
In the end, I had the error: No 'Access-Control-Allow-Origin' header is present on the requested resource. It was tricky because It wasn't any problem with CORS. I was passing wrong a Cognito JWT Token in my authorization header. Finally, I didn't need to pass 'Access-Control-Allow-Origin': '*', on the frontend side and use cors middleware on the lambda side.
i am having a https create-react-app application(https://xyz.site.com), i am proxing a server which is a different domain, when i am loading the application the api is giving the web html data as a response, there is no hit happened in the server,
i have tried using HTTPS=true in .env file, still i am not able to get the server response
setupProxy.js
module.exports = (app) => {
app.use(
'/api',
createProxyMiddleware({
target: process.env.REACT_APP_API_URL, // https://xxx-alb-23333.us-west-2.elb.amazonaws.com
changeOrigin: true,
}),
);
};
I am using below code to upload files to S3 with JS. Don't know what's going on wrong here. Any help will be highly appreciated..
request: {
endpoint: "https://photoform.s3.amazonaws.com",
inputName: 'name',
forceMultipart: false,
paramsInBody : true,
filenameParam : 'test',
params: {},
accessKey: "AKIAIM5CBG3WFLLZBTAA"
},
signature: {
//always included
"expiration": "2014-02-04T14:32:31.373Z",
signature : "Bv7MiXh5LM4nQGcK0HVgu27DmQE=",
policy: "eyAiZXhwaXJhdGlvbiI6ICIyMDE0LTAyLTA0VDE0OjMyOjMxLjM3M1oiLCJjb25kaXRpb25zIjogWyB7ImJ1Y2tldCI6ICJwaG90b2Zvcm0iIH0gLHsgImFjbCI6ICJwdWJsaWMtcmVhZCIgfSx7IkNvbnRlbnQtVHlwZSI6ImpwZyJ9LHsic3VjY2Vzc19hY3Rpb25fcmVkaXJlY3QiOiJodHRwczovL2NzMzAuc2FsZXNmb3JjZS5jb20vYXBleC9MaXN0U2xpZGVyVXBsb2FkUGljc1N1Y2Nlc3MifSxbInN0YXJ0cy13aXRoIiwgIiRrZXkiLCAiIl0gXX0=",
"conditions":
[
//always included
{"acl": "public-read"},
//always included
{"bucket": "photoform"},
//not included in IE9 and older or Android 2.3.x and older
{"Content-Type": "jpg"},
//always included
{"key": "AKIAIM5CBG3WFLLZBTAA"},
//always included
{"x-amz-meta-qqfilename": "test.jpg"},
]
},
cors: {
expected: true, //all requests are expected to be cross-domain requests
sendCredentials: false, //if you want cookies to be sent along with the request
allowXdr: true
},
Please read through the documentation on the docs site that explains how to use Fine Uploader S3. The signature option is not where you create your policy document. Instead of hard-coding the policy document and signature in the signature option, you must specify an endpoint where Fine Uploader will send the policy document it creates. Your server is expected to sign it and return the signature.
Useful links:
Creating a server for Fine Uploader s3
Fine Uploader S3 signature option