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.
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 made an Svelte Kit its working in my local with no problem but when i build it like this:
import adapter from '#sveltejs/adapter-static';
export default {
kit: {
adapter: adapter({
fallback: 'index.html',
})
}
};
And gives me 3 folders and they are: client, prerendered, server.
I'm uploading this 3 folders in my hosting and move the folder files into root folder. Everythings works with no problem BUT i have an api that sends mail. It's gives me 404? Send mail is working in localhost but not working in hosting. I can't fixed it. In manifest.json:
{
type: 'endpoint',
id: "api/sendMail",
pattern: /^\/api\/sendMail\/?$/,
names: [],
types: [],
load: () => import('./entries/endpoints/api/sendMail/_server.js')
},
The path is correct by the way.
The folders in hosting:
Photo
What can i do?
By specifying a fallback page, this means you're turning SPA mode on, so you can't use server endpoints.
From the adapter-static readme:
You can use adapter-static to create a single-page app or SPA by
specifying a fallback page.
The reason this is working local in dev:
During development, SvelteKit will still attempt to server-side render
your routes. This means accessing things that are only available in
the browser (such as the window object) will result in errors, even
though this would be valid in the output app. To align the behavior of
SvelteKit's dev mode with your SPA, you can add export const ssr =
false to your root +layout.
The front end spa is hosted in netlify and backend in heroku. And sending the cookies in response header as shown in the image. But it is not set in the chrome devtools Application or can't be accessed through document.cookie from console.
After long search I found that you cannot set cookie for cross origin.
I am using Vue and Django Rest Framework.
You can use subdomains and set cookie with samesite 'none', secure and set domain to '.example.com'.
When using Vue, you can set cross origin cookies by setting up a proxy in the Vue app.
This works in development where you can edit vue.config.js and add the following:
module.exports = {
devServer: {
proxy: 'http://localhost:3000'
}
}
Another syntax if you want to be more specific would be:
module.exports = {
devServer: {
proxy: {
'^/api': {
target: '<url>',
ws: true,
changeOrigin: true
}
}
}
}
Here you can prepend your proxy url to any req from the front end with /api prepended to it. The proxy will allow cookies to be sent to your frontend while in development.
The Vue proxy documentation goes over it in a bit more detail.
For React users, it is a bit different as you need to add the proxy in the React App package.json like this:
"proxy": "http://localhost:3000"
Here is the documentation for React proxies
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'm working on a VueJS app, and I want to use the Yahoo! Shopping API (documentation: https://developer.yahoo.co.jp/webapi/shopping/shopping/v1/itemsearch.html) to fetch products using their barcode. However, I keep getting a CORS error and I'm not sure why, or what I can do to make it work. My code is as follows:
data() {
return {
appId: 'dj00aiZpPUQ4RTBUUTVSNUs3TyZzPWNvbnN1bWVyc2VjcmV0Jng9NTI-',
apiUrl: 'https://shopping.yahooapis.jp/ShoppingWebService/V1/json/itemSearch'
}
}
...
axios.get(this.apiUrl, {
params: {
appid: this.appId,
jan: 4589707054951
}
})
.then((response) => {
console.log(response);
})
.catch((error) => {
alert(error)
})
The specific error I get is this:
Access to XMLHttpRequest at
'https://shopping.yahooapis.jp/ShoppingWebService/V1/json/itemSearch?appid=dj00aiZpPUQ4RTBUUTVSNUs3TyZzPWNvbnN1bWVyc2VjcmV0Jng9NTI-&jan=4589707054951'
from origin 'https://0.0.0.0:8080' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource.
What can I do to make this work? So far the only way it works is using the CORS Chrome extension, but that's naturally just for testing.
Thanks a lot.
The server/api owner needs to send this in his response header:
Or if you have a server settings panel or something, make sure to add the domain from where you are making the request.
Access-Control-Allow-Origin: 'your-domain-here'.
Please read more at: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
I got the same error. I solved it in the following manner.
This error occurs because we are tryign to access the data hosted on a different server. CORS issue is a browser issue where a certain browser does allow you to access the contents hosted on a different or a virtual server. If you observe the app that you are running on is on the local-host (https://0.0.0.0:8080) and trying to access the data hosted on https://shopping.yahooapis.jp/ShoppingWebService/V1/json/itemSearch. You can solve this problem simply by adding in a few lines of code in your vue application.
Step 1:
Create a new file called vue.config.js in your root directory of the vue application, that is beside your package.json file. Add the following code in your vue.config.js file:
module.exports = {
devServer:{
proxy: "https://shopping.yahooapis.jp"
}
}
Note: https://shopping.yahooapis.jp would be your base url.
Step 2:
Now, go back to your code in data(). Replace the domain name/base url of the apiUrl with https://0.0.0.0:8080. that is now your apiUrl would be https://0.0.0.0:8080/ShoppingWebService/V1/json/itemSearch.
data() {
return {
appId: 'dj00aiZpPUQ4RTBUUTVSNUs3TyZzPWNvbnN1bWVyc2VjcmV0Jng9NTI-',
apiUrl: 'https://0.0.0.0:8080/ShoppingWebService/V1/json/itemSearch'
}
}
Step 3:
Restart your application. Eg, npm run serve.
I found another solution which worked without creating a proxy server or a mock server. You can disable the security settings for accessing cross origin apis on your web browser.
You can disable the CHROME security settings for accessing apis out of the origin by typing the below command on the terminal:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir="/tmp/chrome_dev_session" --disable-web-security
After running the above command on your terminal, a new chrome window with security settings disabled will open up. Now, run your program (npm run serve / npm run dev) again and this time you will not get any CORS error and would be able to GET request using axios.
Hope this helps!