Im currently looking into setting up a proxy within my application for working within Sharepoint to update the cookies manually for local testing. have been using this https://medium.com/#joy.blanks/frontend-frameworks-inside-microsoft-sharepoint-e7694aa43c5d for reference and trying to convert the informaiton into a Vue3 project.
At present im struggling to get any conversation made and not entirely sure where it is falling over, i have tried to enable the debug settings to see if that reveals anything, but not getting any logs out in browser or console
I have the following added to my module.exports (have emited some data):
devServer: {
proxy: {
'https://<sharepoint_target>/_api': {
target: target,
logLevel: 'debug', // this what you want
changeOrigin: true,
}
}
}
and the Azios request is:
await axios.get(`${config.cmsEndPoint}/_api/lists/getbytitle('${list}')/items`,{ params});
but not able to even see if the proxy is kicking in as from the console give me any updated information around if the proxy server is working. Im not sure if its because im using a full url or if this would make a difference. The <sharepoint_)target> and the cms endpoing are the same string
From here i can then look at add a new header into the request as part of the proxy bypass section for the authication when testing locally.
Related
UPD: you can check this yourself: https://github.com/Rusinas/nuxt-fetch-bug
I know I know this sounds stupid as hell and server language has nothing to do with such problems, but hear me out.
I am trying to load data from my local server using $fetch() (or useFetch, no difference), but I get this error:
FetchError: fetch failed ()
No any other details provided. Server is running using Golang/Fiber. When I am trying to load the same endpoint via Postman, everything is OK:
But when I try to load the SAME endpoint in my nuxt 3 application:
I get this:
But my golang server logging this as success:
The more weird thing about all this is that if I run my nodejs version of the exact same server (or any other random API), I don't get any error.
I am pretty sure that my server working 100% correct, but maybe I lost some header or something, which express put automatically? Here is my response headers:
I also checked nodejs response headers:
Doesn't seem like problem is there.
I have no idea what is happening and I don't know other methods to retrieve async data on server side in nuxt js. I have installed axios, but it throws random errors and works on client side for some reason, which makes using nuxt meaningless. However, axios can call this endpoint and returns my data, but only in browser (despite I call it in setup function without any hooks). I am thinking to switch career now
The problem was that fetch() didn't reconize localhost:9000 for some
reason, but when I changed BASE_URL to 127.0.0.1:9000 it started to
work
I had the same error: FetchError: fetch failed ()
Changing localhost in the url to 127.0.0.1 worked for me.
Writing as a separate answer because some might not find it in the comments.
First I think you are using $fetch in a wrong way, as I've seen Nuxt uses fetch for example:
const data = await fetch(endpoint, {
method: "GET",
mode: "cors"
})
.then(resp => resp.json())
And for the server, just enable CORS header on the response, like this:
// you can replace the asterisk with the clients you want.
c.Append("Access-Control-Allow-Origin", "*")
hope I helped :)
I have a vue application that I updated to have PWA capability. It uses the firebase messaging service that has overridden the service worker with its own firebase-messaging-sw.js file.
The service worker is registered, active and working, I have added the pwa in the vue.config.js file so that it generates the manifest.json. When you build the production version of the app the following code gets added to the top of the service worker.
importScripts("precache-manifest.7b51ac9589a6dc8041a85d8f1792defa.js", "https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
From what I see the percache works fine.
Should this be enough to get the site to work in offline mode?
Do I need to add some cache management myself?
What am I missing because I still get the "Page does not work offline" error message in Chrome's dev tools under the App manifest tab.
Looks like Google also picked up on the quick hack and the warning has returned.
So since of Chrome93 (AUG-2021) the quick hack, will not work anymore :
self.addEventListener('fetch', function(event) {})
Solution working "for now" (since we never know what requirements Google will add later on)
I've found a nice article which provides with a few solutions, the first one the author provides is Network-Falling-Back-To-Cache strategy:
your service worker will first try to retrieve the resource from your server. Then when it can’t do that — because for example, you’re offline — retrieve it from the cache (if it exists there).
self.addEventListener('fetch', function(event) {
event.respondWith(async function() {
try{
var res = await fetch(event.request);
var cache = await caches.open('cache');
cache.put(event.request.url, res.clone());
return res;
}
catch(error){
return caches.match(event.request);
}
}());
});
You can find all the information and alternative solutions in the article:
https://javascript.plainenglish.io/your-pwa-is-going-to-break-in-august-2021-34982f329f40
I hope this will help futur visitors.
Additional side note:
using the above code you might encounter the following error:
service-worker.js:40 Uncaught (in promise) TypeError: Failed to execute 'put' on 'Cache': Request scheme 'chrome-extension' is unsupported
This error is caused by chrome extentions like Augury or Vue dev-tools. Switching both off will cause the error to disappear.
You need to add this line in the serviceworker. It fools the browser into thinking that the page will work offline:
self.addEventListener('fetch', function(event) {}) // add this to fool it into thinking its offline ready
Following https://github.com/SimulatedGREG/electron-vue, i run yarn run dev and make a minor change to see how it works.
In electron vue application, i have launch an ajax request in vue component created hook function,
created: function () {
let self = this
this.$http.get('http://example.com/api/hwid/383').then(
function (resp) {
self.title = resp.title
}
)
}
In the vue-electron dev tool, there are following error in the console:
XMLHttpRequest cannot load http://example.com/api/hwid/383. No 'Access- Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9080' is therefore not allowed access.
How to solve that?
Must i set the cross domain in the server side?
Yes, you should add Access-Control-Allow-Origin for localhost on the server side.
Since it's only a browser policy, you eventually can write your own (proxy) server which will get http://example.com/api/hwid/383 data. Then you will request data through your server without any issues.
Assuming I have a model named "Project", the documentation for restful-keystone suggests it should be as easy as the following to enable an API endpoint for it.
exports = module.exports = function(app) {
app.get('/', routes.views.index);
app.get('/gallery', routes.views.gallery);
restful.expose({
Project: true
}).start();
};
However, when I start keystone I get the following:
Rest is not enabled for galleries
Rest is not enabled for projects
Rest is not enabled for users
Can anybody explain to me what is going on and how to get this to work?
Found the solution after some research:
https://github.com/d-pac/restful-keystone/pull/5
This problem only occurs on windows, as the urls use path.join().
Use this https://github.com/d-pac/restful-keystone/pull/5/commits/0d8cf0c1514bad810fbc2345114d913cfb1e921a patch to temporarily fix your problem.
Unfortunately the maintainer has not merged the pull request yet.
I'm trying to setup authentication using github.
I followed the documentation. I've installed the packages:
$> meteor add accounts-github
$> meteor add service-configuration
And my code in server/github.js looks like:
ServiceConfiguration.configurations.remove({
service: "github"
});
ServiceConfiguration.configurations.insert({
service: "github",
clientId: '****',
secret: '*************'
});
Meteor.loginWithGithub({
requestPermissions: ['user', 'public_repo']
}, function (err) {
if (err)
Session.set('errorMessage', err.reason || 'Unknown error');
});
When I start meteor now I get the following error:
/Users/me/.meteor/tools/5bf1690853/lib/node_modules/fibers/future.js:173
throw(ex);
^
TypeError: Object #<Object> has no method 'loginWithGithub'
at app/server/github.js:11:8
at app/server/github.js:18:3
....
So it seems the Meteor object doesn't have the loginWithGithub method. Any suggestions why?
You are running the code in the /server directory of your app.
Usually you call this code from the web browser to make Meteor display the Github OAuth login dialog.
This is not available on the server since its only meant to work on the browser side. This is why you see this error.
You would usually fire Meteor.loginWithGithub() in the event listener for when they click a button or some UI element to begin the login process.
Another thing to keep in mind is Session (Session.get, Session.set, etc) only work on the client too.
To see which methods run where use the Meteor documentation. In the top corner of each method it shows where the code can run: Client, Server or Anywhere.