I have a small react app with a node.js backend (monorepo). The client is using #ffmpeg/ffmpeg, and all works fine locally, but when deployed to Heroku I'm getting the error ReferenceError: SharedArrayBuffer is not defined. This happens when I run ffmpeg.load(). Note that I am only using ffmpeg on the client in the React app.
What I have done so far:
Ensured that my deployed app is using https
Added these lines in setupProxy.js in app.use (located in the client directory). See this answer for context
response.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
response.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
Registered for an origin trial with chrome. This actually worked, but I'd prefer a more permanent solution that works across browsers.
Tested debugging crossOriginIsolated, and verifying that it is true locally but false on my deployed site.
It seems like something is wrong with my Cross-Origin config, or maybe it's just not being applied. Any help would be appreciated.
This was a silly mistake on my part. The Cross-Origin-* headers mentioned in the question were correct, they just had to be in index.js on the backend, not the client.
Related
the link to the code link
I am using axios and nodejs.
All routes work and give a response except one. which returns Network error.
that route is /api/ads/myads.
The route works on its own but when used with redux actions it doesn't
The network tab says that this request was blocked.
So I tried to add cors but that didn't solve the issue.
The file in question is .../actions/adActions this one is producing the error while others don't
I will be uploading the code in a minute
This turned out to be my adblocker thinking this was actual ads
I am trying to connect an app hosted in my localhost:3000 port. The back-end is on the localhost:8080 port (not a remote API but on my own PC. I downloaded a pre-created back-end api and linked the front-end to the back-end with MongoDB using an .env file.
The weird thing is that on MongoDB the connection looks ok, following the tutorial I am using. The backend and the front-end also look alrigh, however, I am unable to login with the form in the screenshot.The error I get when trying to login or create a new user is "xhr.js:178 POST http://localhost:3000/login 404 (Not Found)"
It was a bit hard to put the whole code here, so I am linking you to the front-end repo: https://github.com/manuelalonge/complex-app and the back-end repo: https://github.com/manuelalonge/back-end-api
I can understand the issue is most likely on the back-end but I could not understand where exactly. I tried to get back to the previous lessons in the tutorial but it still doesn't get solved.
Probably it is easier to solve this issue with a screenshare session, so if anybody would contact me I'll be grateful.
Screenshot --> [1]: https://i.stack.imgur.com/jVJzn.png
Your screenshot points to what's wrong. You're posting to localhost:3000, as you know this is the frontend webpack server.
You'll want to create an axios config file and set a base url to hit the correct endpoint.
const axiosInstance = axios.create({
baseURL: 'localhost:8080'
});
export default axiosInstance;
Also, please add some sort of file structure.
I am creating a blogging application using Node, Express and Next.js. I have successfully deployed the frontend portion of the application however I am running into an error when trying to connect to the backend server:
Error: secret should be set
Here is a link to my Github with all the code https://github.com/DragonKnightLeo/Blog-API
This is my first fullstack application so I am pretty junior at how all this works.
I just went through the code and tried to see if I can run your code in my local.
Also, saw the error that is coming when you run the code in your logs above. Seems like you do not have a .env file or JWT_SECRET mentioned in your env file.
Try adding env file and use dotenv node module to bootstrap it along the server run.
I'm currently testing a React front-end application with TestCafe. Current environment is:
React: 16.3.2
Node: 8.10.0
TestCafe: 0.23.0
MacOS Mojave 10.14.1
We've written about 65 tests which all run great. We've introduced a Single Sign On component into our application which has posed some automation challenges. Instead of trying to drive TestCafe against our app AND this particular SSO provider, we're using a fake API call instead.
Simplified order of operations for the app during normal usage is:
React app starts, detects no SSO credentials
Environmental service provides app with a proper SSO URL, react app redirects user to SSO login page using window.location
User logs in and SSO redirects back to our react app with a an additional URL query param & respective value.
React app proceeds forward in a 'logged in' state
Pretty basic stuff.
When the React app is being tested, we just provide different URLs which point to a local ExpressJS instance on localhost:3002. When the React app performs a window.location to the fake SSO API (http://localhost:3002/fakeOAuth) the ExpressJS instance simply performs a response.redirect(http://localhost:3000/?sso=fakeCode) and now we are back to our React app with the additional synthetic SSO data. This scheme works great when not being driven by TestCafe.
When we drive the React app via TestCafe, TestCafe hangs when returning back from the fake SSO call to the React app. After this hang, we have to forcefully kill TestCafe on the command line with a ctrl-c.
Using chrome debug tools and looking at the console output, there is a message:
Uncaught TypeError: __get$ is not a function
at hotCreateRequire (bundle.js:73)
at bundle.js:719
at bundle.js:722
and a screenshot can be found at the end of this post below.
The Test code:
import { Selector } from 'testcafe'
fixture 'Landing Page Body Tests'
.page 'localhost:3000'
test ('Displays correct main welcome title', async t => {
const landingPage = Selector('.card-title')
await t
.expect((landingPage).innerText).eql('Welcome, Fakeuser', 'Incorrect Username Found')
})
Screenshot of TestCafe failure
Does anyone have any ideas as to why TestCafe crashes? I have reworked the test a few times, researched and experimented with using TestCafe's Roles and ClientFunction classes but to no avail. Any input would be greatly appreciated.
It looks like a bug in TestCafe. The __get$function is an internal TestCafe function, and the __get$ is not a function error means that TestCafe wasn't able to process your page properly and install its internal functions in the global window object.
I suggest that you create a new bug report in the TestCafe repository, and provide a HAR report and an example that can be used to reproduce the problem.
I'm using passport with facebook strategy for authentication. Problem doesn't reside in the back-end which is nodejs, as i have tested without angularjs and everything works just fine, but whenever angularjs comes into play i'd get CORS error.
Access-Control-Allow-Origin header is present on the requested resource. Origin host:8000 is therefore not allowed access.
I have tried most of the solutions i have found via google, but nothing has really worked so far. Does anyone have an idea what might be wrong?
This is the most common answer usually to this sort of question as far as i understand.
site.config(function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
});
And like i said, it is not nodejs fault.
You'll need to use a popup to get around the CORS issue with Angular.. see this post for an example: http://www.webdeveasy.com/single-page-application-authentication/