I have had this problem for nearly 2 days, any help would be a life saver.
I have my vue app running on 8080 dev mode and I am trying to integrate blockstack login and that app tries to read http://localhost/manifest.json, so I placed it in static directory, but it is throwing me cors error, do we have solution for that vue cli configurations like vue.config.js?
The "correct answer" doesn't actually help in this instance.
Blockstack needs to be able to hit the manifest.json file (in this case localhost:8080/manifest.json). When the server doesn't support CORS Blockstack will throw an error.
What the OP is asking is how to make "vue-cli-service serve" allow COR requests to happen. To do this, we need to modify Webpack's dev server to allow the CORS request.
Add vue.config.js (if it doesn't already exist)
module.exports = {
configureWebpack: {
devServer: {
headers: { "Access-Control-Allow-Origin": "*" }
}
}
};
I had the same problem like you are having. I applied what the documentation of vue-js says to put some code in vue.config.js like this
module.exports = {
devServer: {
proxy: 'http://localhost:4000'
}
}
but that would'nt help. See this documentation https://cli.vuejs.org/config/#devserver .
I have separate backend which is in laravel,What i did after having wasting too much time in allowing cors in vue-js, i applied cors on my backend index.php file and that worked like a charm.
The problem is you don't really know where is it coming from but look at both front end and backend side and then try to find solution on both sides.
Related
I want to consume an API using a proxy written in express. I use http-proxy-middleware for this. Here is the setup I have:
app.use(
createProxyMiddleware('/api', {
target: 'http://example.com/api/v2',
changeOrigin: true,
pathRewrite: {
'/api': '',
}
})
);
Then I make a request from postman or browser: GET http://localhost:8080/api/list?first=50
All I get from the API server is 404. I saw in the browser that the URL changes to http://localhost:8080/api/v2/list/?first=50 and I don't understand why.
All I want is to add an auth header which I managed to do using onProxyReq, but now I just want everything that comes after /api to be forwarded as is to http://example.com/api/v2.
I just got it to work. Turns out I had some things wrong. The first wrong thing target: 'http://example.com/api/v2' should be target: 'http://example.com'. Then, pathRewrite will rewrite anything it matches and redirect to the new path, so it ended up calling localhost:8080/api/list?first=50 and then localhost:8080/api/v2/list/?first=50. So with these 2 mistakes combined, in the end the API call would be example.com/api/v2/v2/list/?first=50 and that's clearly wrong. I replaced the target and I am now using /api/v2 as context for the proxy.
I would still like to call my proxy using localhost:8080/api/whatever and have it turned into example.com/api/v2/whatever, but it's just a nice to have.
Trying to redirect the http domain to https, as google pages shows the http link in the search results rather than the https one.
Tried to use the redirect-ssl library with several different setups. Firstly npm install redirect-ssl with this in nuxt.config.js
import redirectSSL from "redirect-ssl";
export default {
serverMiddleware: [
redirectSSL.create({
enabled: process.env.NODE_ENV === 'production'
}),
],
}
and also tried just this after npm install redirect-ssl in nuxt.config.js:
export default {
serverMiddleware: ["redirect-ssl"]
}
I was wondering if maybe this doesn't work because it's a static site, but I'm new to development so am not sure.
Your setup is good so far since it followed the documentation: https://github.com/unjs/redirect-ssl#using-with-nuxtjs
If you have http issues with your registrar or in your platform dashboard/server configuration, the issue should be fixed there and not in the code. redirect-ssl won't be able to help here IMO.
Where do you host your app?
I have been transitioning to NextJS from CRA. I'm re-implementing authentication using SSR, and I would like to use NextJS built-in API routes to set HTTPOnly cookies.
There is a weird problem where my backend base URL is https://somesite.com/api and my frontend's - https://somesite.com/. This means that NextJS built-in API routes will be in conflict with my own backend.
I have been researching online and couldn't find any way on changing routing in NextJS, and I don't want to change base URL of my backend, since there are other services depending on it.
Has anyone had the same issue? How can I resolve this issue?
Try next.js rewrite
Rewrites allow you to map an incoming request path to a different destination path. Docs
Check Live Example here: https://stackblitz.com/edit/nextjs-rewrite
If Path is /api it'll point to JSON placeholder APIs.(ex. /api/todos)
module.exports = {
async rewrites() {
return [
{
source: '/api/:slug*',
destination: 'https://jsonplaceholder.typicode.com/:slug*'
}
];
}
};
I'm currently developing the frontend (VueJS) for a project and to test my login and register logics I'm using laravel as backend, though we'll be actually working with springboot for backend. I was coding in a desktop and everything was normal. So I just started to work with my laptop. I got the same project, everything is equal. When I use postman to make the requests, it works normally, but when I try to make them with the form from my website, I get that error.
I've looked everywhere but couldn't fix it. Nothing I tryed did work. And It seems that no one else had a similar problem.
Cross-Origin Read Blocking (CORB) blocked cross-origin response http://127.0.0.1:8000/api/login with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.
Add proxy configuration in vue.config.js file
module.exports = {
devServer: {
proxy: 'http://localhost:4000'
}
}
This will tell the dev server to proxy any unknown requests (requests that did not match a static file) to http://localhost:4000.
here is a link to the doc for more detail
TestCafe devs: Thanks for creating a great, easy to use product!
I'm using testcafe to do full end-to-end tests on my electron app, which is sending XHRs with most endpoint URLs having the file:// scheme and some others an API that we control.
I fixed the CORS issues (testcafe proxy was responding with the 222 code) with the file:// URLs by starting up the Http-server npm package with --cors turned on.
My current problem is that when my app sends the XHR to the API, nothing I seem to do resolves the problem. I'm not looking to mock the API requests. When not running my app inside testcafe instances, both file:// and API requests have no issues.
Is there a (straightforward) way to solve this? (Also, is there a similar solution for the file:// requests without having to create a webserver?) I'm assuming this issue is common, and I have looked thru the Github issues for both testcafe and testcafe-hammerhead as well as the Recipes page. I've also tried to create a request hook, but I'm still getting the 222 response code.
Here is my custom hook:
class MyHook extends RequestHook {
constructor(requestFilterRules) {
super(requestFilterRules, {includeHeaders: true, includeBody: true});
}
onRequest(event) {
event.requestOptions.headers['Origin'] = 'file://';
console.log(event);
}
}
I'm assuming that all I had to do was change the Origin: header to something that my API accepts, per the above code. (I'm guessing that the presence/absence of the includeHeaders/include body properties or the response method in the above code do not have an effect here, but I'm not sure.)
Thank you!