I have built a NUXT app, and I've added to it a serverMiddleware for handling some REST endpoints and connecting to my database.
serverMiddleware: [
{ path: "/api", handler: "~/api/index.js" },
],
So my question is: How to restrict accessing to /api endpoints from only few hosts ? (like having a list of ALLOWED_ORIGINS)
Setting Access-Control-Allow-Origin in the header solved the issue as explained more in-depth on this answer: https://stackoverflow.com/a/32481816/8816585
Since at the end, this part of Nuxt is a regular Express app.
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 using Symfony 4 and Nelmio Api Doc Bundle to create a service that will be only accessible trough APIs (both public frontend and private back office will be created using a JS framework)
I need 2 documentations (maybe more later) :
/api/doc
/admin/doc
Right now I have some Controllers in src/Controllers/Admin and src/Controller/API since they are really different.
I don't understand how to use Nelmio Api Doc Bundle to handle the 2 documentations in 2 differents urls. I know there are areas but I just don't get how to deal with them...
Can someone help me by providing a simple example ?
Thanks
As you mention you need to configure the areas section of the nelmio_api_doc.yaml file as listed here https://symfony.com/doc/current/bundles/NelmioApiDocBundle/areas.html
In your case you would have the package nelmio_api_doc.yaml file as something like:
nelmio_api_doc:
areas:
default:
path_patterns: [ ^/api ]
admin:
path_patterns: [ ^/admin ]
Or whatever the patterns in your routes are to these so it knows which controller function(s) to check for the swagger annotations.
And in your routing config nelmio_api_doc.yaml:
app.swagger_ui:
path: /doc/{area}
methods: GET
defaults: { _controller: nelmio_api_doc.controller.swagger_ui, area: api }
So the api documentation will be accessible via /doc or /doc/api, any other areas can be accessed by adding appending the area name for example /doc/admin etc.
Note that I have set the route as /doc/ to prevent a conflict with the firewall pattern set for ^/api picking it up first as it may conflict, you could add an extra firewall rule to catch it first, I decided to just change the route for this.
If you went with the swagger ui route as /api/doc you would need to change the default area path patterns to:
path_patterns: [ ^/api(?!/doc$) ]
As show in the symfony docs.
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.