_config.yml:
baseurl: "/blog"
url: "https://example.com"
This works perfectly on http://localhost:4000/blog/ but got a 404 error when published on github-pages.
https://example.com/assets/main.css => ok
https://example.com/blog/assets/main.css => 404
Here is my repo: https://github.com/arzyu/blog
Any solutions?
arzyu.github.io/blog is now resolving to your custom domain arzx.org.
You no longer need to set baseurl, and your config must be :
baseurl: ""
url: "https://arzx.org"
Related
I created an API Gateway which uses the x-google-backend to a cloud functions.
When I tried to access it via browser I received a CORS error so I researched and find a solution by adding this to the OpenAPI config where the address part is the same as the cloud function.
options:
operationId: cors
x-google-backend:
address: https://europe-west3-myproject.cloudfunctions.net/api/query
responses:
'200':
description: A successful response
This works! So I removed the public access to the cloud function and gave the gateway service account access to it and tried again.
Which gave me a permission error. After research I found this post explaining the problem and giving me a solution to fix it.
The issue was that I call my define the cloud function with an additional path to call query. I added this to the OpenAPI config:
jwt_audience: https://europe-west3-myproject.cloudfunctions.net/api
So I tried it again in Postman and it works, however in the browser I now get again a CORS error.
So now I am at square one... what should I do?
Here is my complete OpenAPI config:
# openapi2-functions.yaml
swagger: '2.0'
info:
version: 1.0.0
schemes:
- https
produces:
- application/json
paths:
/query:
post:
operationId: api
parameters:
- in: "body"
name: "message"
schema:
$ref: '#/definitions/messasge'
x-google-backend:
address: https://europe-west3-myproject.cloudfunctions.net/api/query
jwt_audience: https://europe-west3-myproject.cloudfunctions.net/api
x-google-quota:
metricCosts:
"read-requests": 1
security:
- api_key: []
responses:
'200':
description: A successful response
schema:
type: string
options:
operationId: cors
x-google-backend:
address: https://europe-west3-myproject.cloudfunctions.net/api/query
responses:
'200':
description: A successful response
securityDefinitions:
# This section configures basic authentication with an API key.
api_key:
type: "apiKey"
name: "key"
in: "query"
x-google-management:
metrics:
# Define a metric for read requests.
- name: "read-requests"
displayName: "Read requests"
valueType: INT64
metricKind: DELTA
quota:
limits:
# Define the limit or the read-requests metric.
- name: "read-limit"
metric: "read-requests"
unit: "1/min/{project}"
values:
STANDARD: 100
definitions:
chatmessage:
type: "object"
properties:
id:
type: string
description: session id
example: "2vr34524tg3"
query:
type: string
description: message
example: "Hello"
required:
- id
- query
According to the documentation Cross-Origin Resource Sharing (CORS) on Cloud Functions has some limitations:
CORS preflight requests are sent without an Authorization header, so they will be rejected on all non-public HTTP Functions. Because the preflight requests fail, the main request will also fail.
To overcome this limitation in your case the mentioned documentation recommends to deploy a Cloud Endpoints proxy and enable CORS. Also you might find useful the Support CORS documentation page for a description of available CORS support options
Yesterday I successfully ran this GitHub action several times, but now it is failing with an HTTP Not Found error. If I make the same REST call to the URL in Postman https://api.github.com/repos/RobotOpsPlayground/scottTest5/issues/4 I get back the expected JSON results. I do not understand what has changed, does anyone have an idea?
So far, I have recreated and am using a new GitHub personal token, which has the same permissions as the one that was working. I have copied the code into a new repo and encountered the same problem.
This is the output from the action's execution:
Run ./.github/actions/route_issue/
with:
myToken: ***
myOwner: RobotOpsPlayground
myRepo: RobotOpsPlayground/scottTest5
myKnownLabels: repo-request, team-request, member-request, triage
myDefaultLabel: triage
myIssueNumber: 0
issueNumber 4
owner RobotOpsPlayground
repo RobotOpsPlayground/scottTest5
token ***
getting /repos/RobotOpsPlayground/scottTest5/issues/4 details from github
"GET /repos/RobotOpsPlayground/scottTest5/issues/4
sync function called for /repos/:repo/issues/:issueNumber
failing due to HttpError: Not Found -- Not Found
Error: Not Found
And here is the action.yaml
name: 'route_issue'
description: 'pull some info from an issue'
inputs:
myToken:
description: 'github token'
required: true
myOwner:
description: 'github owner|organization'
required: true
default: 'RobotOpsPlayground'
myRepo:
description: 'github repo'
required: true
And a part of the action's index.js
async function run() {
const myToken = core.getInput('myToken');
const myOwner = core.getInput('myOwner');
const myRepo = core.getInput('myRepo');
const myIssueNumber = github.context.issue.number;
// get issue details by looking up its issue number
console.log(`getting /repos/${myRepo}/issues/${myIssueNumber} details from github `);
let req = {
method: 'GET',
url: '/repos/:repo/issues/:issueNumber',
headers: { authorization: `token ${myToken}` },
repo: myRepo,
issueNumber: myIssueNumber,
log: "debug"
};
const result = await request req
console.log("past getting issue")
issue = result['data'];
console.log(`my issue ${issue}`)
if (issue.state !== 'open') {
console.log("issue was not open")
} else {
console.log("processing issue");
}
}
And the GitHub workflow
name: route_issue
on:
issues:
types: [opened]
jobs:
route_issue:
runs-on: self-hosted
outputs:
issueNumber: ${{ steps.route_issue.outputs.issueNumber }}
requestType: ${{ steps.route_issue.outputs.requestType }}
steps:
- id: checkout
uses: actions/checkout#v2
- id: route_issue
uses: ./.github/actions/route_issue/
with:
myToken: ${{ secrets.GH_TOKEN3 }}
myOwner: ${{ github.repository_owner }}
myRepo: ${{ github.repository }}
Fixed, due to my error
The code block
let req = {
method: 'GET',
url: '/repos/:repo/issues/:issueNumber',
headers: { authorization: `token ${myToken}` },
repo: myRepo,
issueNumber: myIssueNumber,
log: "debug"
};
had a mistake, which I am not sure why it worked before, but anyway the issue was that the myRepo variable contained the value my-organization/my-reponame. When the req structure was passed into the request call
const result = await request(req)
the #octokit/request library I am using was encoding the :repo parameter to be my-organization#2FA/my-reponame, replacing the '/' with #2FA. This character replacement made the url generated invalid.
The fix was to split the myRepo variable on the '/' and pass both parts to the request library.
let org_repo = myRepo.split('/')
let req = {
method: 'GET',
url: '/repos/:org/:repo/issues/:issueNumber',
headers: { authorization: `token ${myToken}` },
org: org_repo[0],
repo: org_repo[1],
issueNumber: myIssueNumber,
log: "debug"
};
The generated URL is now correct, and the request calls are working.
I use this sample code:
axios({
method: 'post',
headers: { 'content-type': 'application/json' },
url: 'http://somePlace:8040/someWSendpoint',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
But that request never reach its destination. Apparently, because the POST method is transformed to OPTIONS method, and rejected by the endpoint url.
This is what the 'Network' window shows in the Chrome inspector:
Request Method: OPTIONS
Status Code: 405 Method Not Allowed
This is what the 'Console' window shows in the Chrome inspector:
Access to XMLHttpRequest at 'http://somePlace:8040/someWSendpoint' from origin 'http://localhost: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.
xhr.js?b50d:160 POST http://somePlace:8040/someWSendpoint net::ERR_FAILED
dispatchXhrRequest # xhr.js?b50d:160
xhrAdapter # xhr.js?b50d:11
dispatchRequest # dispatchRequest.js?5270:59
Promise.then (async)
request # Axios.js?0a06:51
wrap # bind.js?1d2b:9
send_firma # AltaFirma.vue?c240:504
click # AltaFirma.vue?3ed8:1812
invokeWithErrorHandling # vue.runtime.esm.js?2b0e:1854
invoker # vue.runtime.esm.js?2b0e:2179
original._wrapper # vue.runtime.esm.js?2b0e:6917
createError.js?2d83:16 Uncaught (in promise) Error: Network Error
at createError (createError.js?2d83:16)
at XMLHttpRequest.handleError (xhr.js?b50d:69)
I am wondering if people "at the other side" need to configure something related to that CORS thing in his server ¿?
Any help will be very appreciated.
I have an application written in Angular 8 that I'm serving on nginx. After the deployment I get an following error:
Failed to load resource: the server responded with a status of 404 ()
Additionally in the Dev Tools we can see such a message:
error: "404 Not Found404 Not Foundnginx/1.12.0
message: "Http failure response for https://myUrl/app/assets/config/endpoints.json: 404 OK
name: "HttpErrorResponse" ok: false status: 404 statusText:
"OK" url: "https://myUrl/app/assets/config/endpoints.json"
What I didn't understand why is the response stating "OK"? But it's not the main problem. The main problem is that I can't load this endpoints.json file neither access any file located under the assets dir.
When I directly go to the URI:
https://myUrl/app/someFile.png
then it's visible, but if I try to reach
https://myUrl/app/assets or https://myUrl/app/assets/logo.png
then i get an 404 error page.
It's served from a docker container and I saw that all files are there so the structure is as follows in
/usr/share/nginx/html/
-/
-index.html
-assets/
-------config/
-------------endpoints.json
-------images/
-------------logo.png
-polifills.js
-favicon.ico
The app was build with the --prod flag and the base href flag --base-href ./
As I see the favicon is loading and all the scripts in the main dir work fine. The problem is related to the assets dir...
Here are my files:
* nginx.conf
server {
listen 8888;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
include /etc/nginx/mime.types;
try_files $uri $uri/ /index.html;
}
}
Enpoints service (which is trying to get this endpoints.json
private enpoints$: Observable<Endpoint>;
private readonly ENDPOINT_URL = './assets/config/endpoints.json';
constructor(private http: HttpClient) {}
public loadEndpoints(): Observable<Endpoint> {
if (!this.enpoints$) {
this.enpoints$ = this.http.get<Endpoint>(this.ENDPOINT_URL).pipe(shareReplay(1));
}
return this.enpoints$;
}
Any suggestions?
Just figured it out. The issue was related to my nginx configuration.
I had to take the root path out of the location block so it's applicable to all locations. The official nginx pitfalls doc helped me here a lot.
Now my config file looks like that:
server {
listen 8888;
server_name localhost;
root /usr/share/nginx/html;
location / {
index index.html index.htm;
include /etc/nginx/mime.types;
try_files $uri $uri/ /index.html;
}
location /assets {
try_files $uri $uri/ /index.html;
}
}
Although I think the second block isn't needed at all. I have to check it, and will reply.
Trying to read a json file with http.get in Angular 4 project using the following script.
http.get('../jsonmock/data.json')
.subscribe(res => this.data = res.json() );
If I try to read the json file from assets folder it runs successfully but from any other folder I got the following error on console
http.get('../jsonmock/data.json')
.subscribe(res => this.data = res.json() );
Response {_body: "↵↵↵↵↵↵", status: 404, ok: false, statusText: "Not Found", headers: Headers, …}
headers
:
Headers {_headers: Map(8), _normalizedNames: Map(8)}
ok
:
false
status
:
404
statusText
:
"Not Found"
type
:
2
url
:
"http://localhost:4200/jsonmock/data.json"
_body
:
"↵↵↵↵Error↵↵↵Cannot GET /jsonmock/data.json↵↵↵"
proto
:
Body
constructor
:
ƒ Response(responseOptions)
arguments
:
(...)
caller
:
(...)
length
:
1
name
:
"Response"
prototype
:
Body {constructor: ƒ, toString: ƒ}
proto
:
ƒ Body()
[[FunctionLocation]]
:
http.es5.js:900
[[Scopes]]
:
Scopes[3]
toString
:
ƒ ()
If you are using the Angular CLI ... it will only look for assets in the folders you tell it to in the .angular-cli.json file.
In the "apps" node there is a node called "assets":
"assets": [
"assets",
"api",
"favicon.ico"
],
By default, only the assets and the favicon are here. If you want it to look in other locations for your .json file, you need to specify those locations here, as I did with the api folder.