I am trying to apply 301 redirect with my Gatsby and S3 + Cloudfront , and so far i have no success ,
i have about 210 redirect url , i will list below my configuration .
createRedirect({
fromPath: `/old-url`,
toPath: `/new-url`,
isPermanent: true,
redirectInBrowser: true,
});
{
resolve: 'gatsby-plugin-s3',
options: {
bucketName: process.env.S3_BUCKET,
region: 'eu-west-1',
protocol: 'https',
hostname: 'stage-mydomain.de',
bucketPrefix: 'de',
generateRoutingRules: true,
generateRedirectObjectsForPermanentRedirects: true,
}
}
note that i have no plugin related to redirect inside my config ,
what i would like to accomplish is pure 301 server side redirect , i dont want JS redirect and Meta redirect because
Js will not work with JS disabled and Meta is not good for SEO .
can someone help please?
Thanks
Related
I am working on my blog and chose Keystonejs 6(CMS) to host my content. The issue is, CMS allows any origin and serve requests. This document says you can whitelist origin but seems like it is not working or I am not able to understand between the lines. My custom config looks like this:
keystone.ts:
const whitelist = ['https://example1.com', 'https://example2.com'];
export default withAuth(
config({
db,
storage: { ... },
lists,
session,
server: {
cors: {
origin: whitelist,
credentials: true,
},
port: Number(PORT) || 3000,
},
}),
);
Any help would be appreciated! Thanks for reading!
In vue.js to make Cross-Origin Resource Sharing(CORS) requests, we can configure a proxy rule in the vue.config.js file:
vue.config.js:
module.exports = {
//configure webpack-dev-server behavior
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000/',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
Considerations:
My Vue client application run on http://localhost:8080, my api server run on http://localhost:3000.
'/api': { target: 'localhost:3000' ........ }
All requests made to /api' from within my vue application will be forwarded to target: 'localhost:3000'
So if there are requests that start with /api resource path, these requests will be proxied to the target address: localhost:3000
for example:
request localhost:8080/api will be proxied to localhost:3000/api
request localhost:8080/api/1 will be proxied to localhost:3000/api/1 and so on.
pathRewrite: { '^/api': '' }
^/api is a regex.
pathRewrite matches /api path in the target address and replaces it (/api) with empty string
for example, proxied request to localhost:3000/api/1 will become localhost:3000/1
changeOrigin: true enable CORS requests
At the end, With the above proxy rule, every requests starts with /api :(localhost:8080/api, localhost:8080/api/1 ..........) will be proxied to localhost:3000, localhost:3000/1 ........
are my considerations correct??
The official documentation is not very clear.
Thanks
I have an S3 hosted website working well behind Cloudflare with the following:
example.com/ works fine
example.com/test also works but the document itself in the network tab is returning 404, naturally, because /test doesn't exist on S3.
This is a problem for SEO, how do I configure Cloudflare to treat 404s as 200s?
In Cloudfront I usually do this:
But I can find no corresponding configuration in Cloudflare. Will this have to be done in a Cloudflare worker? What did people do before Workers existed?
Turns out people just didn't host on S3 with Cloudflare before workers, and if they did, they didn't care/notice that their routes would return 404.
Anyway, this is the solution with Cloudflare workers to force the return code of 200:
addEventListener('fetch', event => {
event.respondWith(fetchAndApply(event.request))
})
async function fetchAndApply(request) {
let originalResponse = await fetch(request)
const contentType = originalResponse.headers.get("Content-Type")
// Only bother with index pages (not assets)
if (contentType && contentType.includes("text/html")) {
// Force 404's from S3 to return as 200 to prevent Google indexing issues
let response = new Response(originalResponse.body, {
...originalResponse,
status: 200,
statusText: 'OK'
}
)
// Don't cache index.html
response.headers.set('Cache-Control', 'max-age=0')
return response
}
return originalResponse
}
I beleive you can use this approach from the AWS docs.
https://docs.aws.amazon.com/AmazonS3/latest/dev/how-to-page-redirect.html
Example #3 at the bottom of the document page.
This is S3 bucket for the demo.
EDIT: removed the URL, it served the purpose that was usable only to
author of the question.
Here is short example. Which will redirect to "home" if not found.
<RoutingRules>
<RoutingRule>
<Condition>
<HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals >
</Condition>
<Redirect>
<HostName>BUCKETNAME.s3-website-eu-west-1.amazonaws.com</HostName>
<ReplaceKeyWith></ReplaceKeyWith>
</Redirect>
</RoutingRule>
I have a Vue.js CLI project working.
It accesses data via AJAX from localhost port 8080 served by Apache.
After I build the project and copy it to a folder served by Apache, it works fine and can access data via AJAX on that server.
However, during development, since the Vue.js CLI website is being served by Node.js which is serving on a different port (8081), I get a cross-site scripting error) and want to avoid cross-site scripting in general.
What is a way that I could emulate the data being provided, e.g. some kind of server script within the Vue.js-CLI project that would serve mock data on port 8081 for the AJAX calls during the development process, and thus avoid all cross-site scripting issues?
Addendum
In my config/index.js file, I added a proxyTable:
dev: {
env: require("./dev.env"),
port: 8081,
autoOpenBrowser: true,
assetsSubDirectory: "static",
assetsPublicPath: "/",
proxyTable: {
"/api": {
target: "http://localhost/data.php",
changeOrigin: true
}
},
And now I make my AJAX call like this:
axios({
method: 'post',
url: '/api',
data: {
smartTaskIdCode: 'activityReport',
yearMonth: '2017-09',
pathRewrite: {
"^/api": ""
}
}
But now I see in my JavaScript console:
Error: Request failed with status code 404
Addendum 2
Apparent axios has a problem with rerouting, so I tried it with vue-resource but this code is showing an error:
var data = {
smartTaskIdCode: 'pageActivityByMonth',
yearMonth: '2017-09'
}
this.$http.post('/api', data).then(response => {
this.pageStatus = 'displaying';
this.activity = response.data['activity'];
console.log(this.activity);
}, response => {
this.pageStatus = 'displaying';
console.log('there was an error');
});
The webpack template has its own documentation, and it has a chapter about API proxying during development:
http://vuejs-templates.github.io/webpack/proxy.html
If you use that, it means that you will request your data from the node server during development (and the node server will proxy< the request to your real backend), and the real backend directly in production, so you will have to use different hostnames in each environment.
For that, you can define an env variable in /config/dev.env.js & /config.prod.env.js
Is it possible, in Laravel 4.1, to redirect to a relative path instead of the full path ? If we look at the UrlGenerator::to method, here what we have:
public function to($path, $extra = array(), $secure = null)
{
if ($this->isValidUrl($path)) {
return $path;
}
$scheme = $this->getScheme($secure);
$tail = implode('/', array_map('rawurlencode', (array) $extra));
$root = $this->getRootUrl($scheme);
return $this->trimUrl($root, $path, $tail);
}
This will act like this (meta-code):
mysite.com/url Redirect::to('/test'); => mysite.com/test
What I'd want it's to be redirected to a relative URL:
mysite.com/url Redirect::to('/test'); => /test
The problem it's that the company I'm working for, use a ReverseProxy to redirect all the traffic to HTTPS protocol, and with this kind of laravel redirects I keep getting redirected from HTTP to HTTPS :
call: GET http:// mysite.com
proxy: GET https:// mysite.com
redirect to login: GET http:// mysite.com / login
proxy: GET https:// mysite.com / login
submit login: POST http:// mysite.com / login
proxy: POST https:// mysite.com / login
And the problem is that the submit form fail.
Is there a possibility to redirect to the relative path and let the proxy define the root url / protocol to use ?
I'm on Laravel 4.2, I'm using Redirect::away('/test'), not sure if the function is there yet on Laravel 4.1.