I had problems yesterday that I never had on previous nuxt projects about CORS.
I have indeed read that it was necessary to set the proxy to solve the problem. Despite this, I have a 504 error. I followed several solutions found on the github repository & stack overflow without having found the problem.
My post function
await this.$axios.post("/api/contact", {
replyTo: this.form.email,
name: this.form.name,
firstName: this.form.firstName,
phone: this.form.phone,
company: "",
message: this.form.message,}).then(() => {this.isSend = true;}).catch((e) => {console.log(e);this.isError = true;});
my nuxt config
modules: ["#nuxtjs/axios", "#nuxtjs/proxy"],
axios: {
proxy: true,
debug: true,
},
proxy: {
"/api/": {
target: "http://myserver.eu-west-3.elasticbeanstalk.com/",
pathRewrite: { "^/api/": "" },
changeOrigin: true,
},
},
my api call need to be done on http://myserver.eu-west-3.elasticbeanstalk.com/contact
I'm pretty sure I made a mistake somewhere, but I really can't find where...
error504
Initial cors error
EDIT 1 : everything work find with postman, but not with my frontend i tried with a apigateway lambda ses, it's work with postman, not with front end, i tried with a node express server with ses, it's work with lambda, not with front end :(
EDIT 2 : I managed to make the form submission work, I cloned one of my old projects, then I replaced the content with that of this project. I think it's a nuxtJs and Axios problem. Very strange.
Related
I am getting bellow error
Mixed Content: The page at 'https://example.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://x.xxx.1x.xxx:x000/api/v1/users/slots?type=NIGHT&duration='.
But in localhost site runs smoothly with no issues. Only when i upload the build to online then i am getting this error.
this is how i configured Axios
axios: {
proxy: true
},
axios: {
baseURL: 'http://x.xxx.x1.xxx:x000/api/v1',
},
I'm currently using the Reddit API in my Nuxt app with $fetch. Works great, runs well. Except - loading it up on Safari causes the following errors when deployed to a https domain on Vercel.
https://api.reddit.com/r/funny/hot.json?raw_json=1&limit=50
(Failed to load resource: Origin https://xxxx.com is not allowed by
Access-Control-Allow-Origin)
And.
https://api.reddit.com/r/funny/hot.json?raw_json=1&limit=50 failed due
to access control checks.
I'm looking through CORS issues, but I'm unsure why it would work on MacOS Chrome & Safari, Android Phones and Not iOS Safari & Chrome?
I managed to fix this by creating a proxy in Nuxt Axios as follows:
axios: {
baseUrl: '/api',
proxy: true
},
proxy: {
"/api/": {
target: "https://api.reddit.com/",
pathRewrite: { "^/api/": "" }
}
},
To this day, I'm unsure what on earth was happening. But the proxy seems to make Safari and FireFox happy.
I have a setup with nuxt and keycloak as auth strategy which in general is working. I can login via keycloak and then will have this.$auth.loggedIn === true on the page. When navigating via vue-router, this.$auth.loggedIn will also be true when switching to a new page.
But when I then reload the page (CMD+r/F5), server side rendering will have false for this.$auth.loggedIn, while on client side it will be true. This forced me to do a lot of <client-only> blocks in the templates to prevent ssr mismatches.
I wonder if it is possible that on first page load server side rendering can return a page with authorized content? I would think this should be possible since cookies with auth info are set and sent to the server.
Or is that never possible and efficient server side rendering can only be used for non-authorized content?
Versions:
nuxt: 2.15.8
#nuxtjs/auth-next: 5.0.0-1643791578.532b3d6
nuxt.config.js:
auth: {
strategies: {
keycloak: {
scheme: 'oauth2',
endpoints: {
authorization: `${ process.env.KEYCLOAK }/protocol/openid-connect/auth`,
userInfo: `${ process.env.KEYCLOAK }/protocol/openid-connect/userinfo`,
token: `${ process.env.KEYCLOAK }/protocol/openid-connect/token`,
logout: `${ process.env.KEYCLOAK }/protocol/openid-connect/logout`,
},
token: {
property: 'access_token',
type: 'Bearer',
maxAge: 1800,
},
refreshToken: {
property: 'refresh_token',
maxAge: 60 * 60 * 24 * 30,
},
responseType: 'code',
grantType: 'authorization_code',
clientId: process.env.CLIENT_ID,
scope: ['openid', 'profile', 'email', 'roles'],
codeChallengeMethod: 'S256',
redirect: {
logout: '/',
callback: '/',
home: '/',
},
},
},
},
Having a Vue component with this:
created() {
console.log(this.$auth.loggedIn);
},
Will return false for SSR and true on client side on page load/refresh when logged in.
After manually implementing a server side authenticator, I found out that the problem was my local docker setup.
Didn't think this was the problem before, so I forgot to mention it.
I have a local docker container with keycloak and a local docker container with nuxt.
Long story short, it seems that the nuxt server wasn't able to communicate with keycloak, hence wasn't able to fetch the user. After changing some addresses so that keycloak was available on the same address from the browser and from within my nuxt server docker container, the nuxt server did get $auth.loggedIn=true automatically on page load if the is was logged in.
Not sure if I didn't see it, but I wished nuxt auth would give me an error if the nuxt server failed to communicate with the authorization server. Would have saved me a lot of debugging.
I have vue-cli-service running on port 3001, and my backend rails app running on port 3000.
I want all unknown requests to go to the backend rails app. Reading the vue-cli docs, it would seem that the below code should work, but it doesn't.
module.exports = {
devServer: {
disableHostCheck: true,
port: 3001,
public: '0.0.0.0:3001',
overlay: {
warnings: true,
errors: true
},
proxy: 'http://lab.lizardgizzards.com:3000'
},
publicPath: "/",
}
I have a rails route /terms that should render a scaffold page. When I enter http://lab.lizardgizzards.com:3001/terms it doesn't render the rails page, it still shows a vue rendering. Shouldn't it render the rails page? Or does this only work for API requests?
Based on the documentation it would seem that what you've done with the proxy setting should work. However, it didn't work for me either.
The reason for that is here in the code:
https://github.com/vuejs/vue-cli/blob/9ab0fbde1cf87d888aa3d2c3c52176b8de464c59/packages/%40vue/cli-service/lib/util/prepareProxy.js#L81
If an explicit context is set (such as in the example below) it will bail a few lines earlier and everything works fine. Without a context it assumes all requests with accept: text/html should be index.html, presumably for compatibility with history mode routing. Other requests, such as AJAX calls, should be proxied fine.
This did work for me, even for HTML pages.
proxy: {
'/': {
target: 'http://lab.lizardgizzards.com:3000'
}
}
Personally I would put the remote server behind its own path to clearly separate it from the UI. e.g.:
proxy: {
'/api': {
target: 'http://lab.lizardgizzards.com:3000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
I have the following sample code, in a nuxtjs/vuejs project
<template>
<v-app>
<div id="dibs-complete-checkout"></div>
</v-app>
</template>
<script>
export default {
head () {
return {
script: [
{ src: 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' },
{ src: 'https://test.checkout.dibspayment.eu/v1/checkout.js?v=1' }
]
}
},
created () {
this.$axios.get('test/11').then((response) => {
var checkoutOptions = {
checkoutKey: response.data.checkOutKey,
paymentId: response.data.dibsPaymentId,
containerId: 'dibs-complete-checkout',
language: 'en-GB'
}
var checkout = new Dibs.Checkout(checkoutOptions)
checkout.on('payment-completed', function (response) {
})
checkout.on('pay-initialized', function (response) {
checkout.send('payment-order-finalized', true)
})
})
.catch((e) => {
console.error(e)
})
}
}
</script>
What is happening in there, is:
An external script from dibspayment.com is loaded
There is an axios call to the backend to return a checkoutKey and a paymentId, necessary in the checkoutOptions object
The script loaded from dibspayment.com contains an object, Dibs, which has a method called Checkout(checkoutOptions)
The development server is running on http.
I get several errors. One is "Dibs is not defined"
./pages/index.vueModule Error (from ./node_modules/eslint-loader/index.js):C:\git\ssfta_web\pages\index.vue 29:28 error 'Dibs' is not defined no-undefâś– 1 problem (1 error, 0 warnings)
Which is odd, because the page loads and is rendered inside the
Another error is
OPTIONS https://test.checkout.dibspayment.eu/api/v1/theming/checkout 401 (Unauthorized)
And the last error is
Access to XMLHttpRequest at 'https://test.checkout.dibspayment.eu/api/v1/theming/checkout' from origin 'http://10.0.75.1:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I've tried:
Contacting DIBS payment support team, where responses are both slow and offer no real advice (providing me with a link to the top level FAQ page). I suspect that they use their sales department to answer inquiries.
running it on https, that made it worse
running it behind a nginx reverse proxy, which has an ssl certificate, the process running the code itself over http but nginx 'converts' (?) it to https
numerous hail maries that made everything worse
An image of the current situation
I don't really have a question, I just hope/suspect that I'm forgetting some basic configuration or detail that someone could spot
Any advice appreciated.
Had this issue this week.
Contacted Dibs Support with the issue, left work and the next day i returned to an email from support with a copy of my API-keys which i already had received, but after testing out my project again (Which had no changes) this error magically disappeared, so apparently this issue was something on their end. Assuming my keys were missing the proper authorisations.
Read the error message properly, it is an es lint error
Did this to solve it
/*eslint-disable */
var checkout = new Dibs.Checkout(this.checkoutData)
/* eslint-enable */