I'm developing an Add-in for Outlook Desktop and want to call my service during the OnNewMessageCompose event.
I'm using fetch like this. I'm posting to the my service with a token and a body
const result = await fetch('https://myservice.com/endpoint', {
mode: 'cors',
method: 'POST',
headers: {
'Content-Type' : 'applications/json',
'Authorization': 'Bearer : token'
},
body: JSON.stringify(body)
});
When the add-in runs within the web version of Outlook, it's fine. When run in the Desktop. it fails. A similar issue was reported regarding Excel Custom functions and the solution was to use the Sharedruntime. That does not appear to be available in Outlook. If I take out the headers it's fine, but ideally I need those to authorize against the service. Is there a way to pass custom headers via a POST in the Desktop version of an add-in?
Desktop Outlook does not support SharedRuntime, so that workaround won't work. We have documented the lack of Full CORS support online. Search for Full CORS on this page : https://learn.microsoft.com/en-us/office/dev/add-ins/outlook/autolaunch
As a workaround for now, ensure that your add-in and your service are on the same origin to eliminate the need for CORS.
We are currently working to support Full CORS. Unfortunately, we don't have any timelines to share.
Related
I'm currently building an app with a React/Next.js frontend (deployed on Vercel) and a Django (Rest Framework) backend (deployed on Heroku).
The frontend fetches some information from the backend to populate the pages, but I also want users to be able to call the API directly. I want them to be able to call it through the frontend URL for consistency (e.g. calling https://www.frontend.com/api/some_endpoint).
I'm wondering a bit about the mechanics of porting the Django backend through Next's API Routes. For example, in the Next project I could make a file ./pages/api/some_endpoint.js as such:
export default function handler(req, res) {
res.status(200).json(
fetch("http://www.backend.com/api/some_endpoint/", {
mode: "cors",
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: (JSON.stringify(req.body, null, 2),
}).then((res) => res.json())
);
}
Questions
My questions relating to the above are as follows:
Will this cause issues with authentication? In particular, the Django API currently requires users to supply a user-specific API token. I've temporarily shut this off so the frontend can fetch the data to populate the pages, but was intending on devising a way to only require an API token for requests that don't originate from frontend.com. If all requests are "ported" through frontend.com in this fashion, though, will that make authentication impossible?
Related, currently the list of allowed CORS origins is only frontend.com. Will this need to change in light of the answer to the above? Are there any other security considerations that stem in particular from this API porting?
What performance hit will there be in terms of speed with this setup? I'm sure this question is not easy to answer, and very fast speeds aren't necessary for this application, but I'm just curious. Would it be better to alternatively put the API on a subdomain or something? I'm not very experienced in networking so I'm not sure how this would work.
Should there be error handling implemented in the Next API, or should it just be a "pass through"? I suspect the answer is that there should be, but I'm not sure where this would be implemented.
Any guidance or advice is greatly appreciated!
Apologies if I sound uneducated on the matter, I have never used JS until a few days ago and don't have much server/API experience.
Essentially I am using nextauth.js to authenticate a users twitter account and allow them to sign into an app. Next.js is providing them with a sign in option and once they sign in and authorize the app I now have access to their api key/ secret.
I also created an app in node.js that will allow me to change their twitter header for them. This runs on a separate port. I need to be able to send the key/secret I get from the next.js app to the node server so that I can use these keys to make the changes to their account. I am unsure of how to do this and what type of requests are required.
Ive spend a good amount of time looking into online resources but I haven't been able to conceptualize it fully. Any help/resources/explanations would be very appreciated! Thank you in advance!
if you have access to secret key you wanna send on the client-side you can simply use fetch
const response = await fetch('https://yourbackend.url/here', {
method: 'POST', // make sure the method is set to POST
headers: {
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/json'
},
body: JSON.stringify({secretKey: "yourseceretkeyhereaslkdaasldkaslkdjlask"}) // send the secret as payload in the body
}).then(res => res.json())
.catch(console.log);
catching the payload on your server will totally depend on what kind of server you have setup.
I get Nfts on magic eden with this third party api.
http://api-mainnet.magiceden.io/rpc/getGlobalActivitiesByQuery?q=%7B%22%24match%22%3A%7B%22txType%22%3A%22initializeEscrow%22%2C%22blockTime%22%3A%7B%22%24gt%22%3A1643468983%7D%7D%2C%22%24sort%22%3A%7B%22blockTime%22%3A-1%7D%7D
It responses with results on postman and browser but causes 403 error with axios in node.js.
How can I get data in node.js?
const res = await axios.get(
'http://api-mainnet.magiceden.io/rpc/getGlobalActivitiesByQuery?q=%7B%22%24match%22%3A%7B%22txType%22%3A%22initializeEscrow%22%2C%22blockTime%22%3A%7B%22%24gt%22%3A1643468983%7D%7D%2C%22%24sort%22%3A%7B%22blockTime%22%3A-1%7D%7D',
{
headers : {
"Content-Type": "application/json",
"Access-Control-Allow-Credentials": "*"
}
}
);
return res.data;
Using a proxy here won't help as they have Cloudflare protection set up against bots/scripts and it requires cookies to be present: screenshot 1, screenshot 2
You should get in touch with their support and ask for the API key (they have a public API v2 coming soon), and then use it in Authorization: Bearer <token>
Few things to note here: Their API v2 is still in works and lacks some basic features. Using their current v1 API does not require having an API key (that's what their support personnel said) but it does have bot protection against scripted attacks.
I'm hesitant to go with the API v2 since it lacks even the most basic stuff and I don't expect it to come out anytime soon. Personally, I'm looking to get in touch with people who managed to integrate the v1 into their applications, to see what necessary steps they followed in order to be able to do it.
If you managed to find some new info on that regard let me know. I'll also edit this comment in case I find out how to set up the v1 connection properly.
EDIT: managed to get it working by using the https://github.com/puppeteer/puppeteer library. Started a small headless instance of Chrome and I hit the ME API with that browser like so: screenshot 3
It can be because of CORS error.
You can use Cors proxy to fix it.
Try it,please.
const CORS_PROXY_API = `https://cors.ryanking13.workers.dev/?u=`;
const magicedenAPI = `http://api-mainnet.magiceden.io/rpc/getGlobalActivitiesByQuery?q=%7B%22%24match%22%3A%7B%22txType%22%3A%22initializeEscrow%22%2C%22blockTime%22%3A%7B%22%24gt%22%3A1643468983%7D%7D%2C%22%24sort%22%3A%7B%22blockTime%22%3A-1%7D%7D`
const { data } = await axios({
method: 'get',
url: `${CORS_PROXY_API}${magicedenAPI}`
});
I've a piece of code that sends a post request to my backend. Everything works fine for me.
However I have a vendor that are overseas facing a weird error. When they render my Vue Web Application, the POST request made to my backend has an additional "/" in between the parameters.
And i really do not know why it keeps happening at their end but not on me. We are both using the same browser.
Below is the library and part of the code that makes a request to my backend.
import axios from "axios";
export const HTTP = axios.create({
baseURL: _baseURL,
headers: {
"Content-Type": "application/json",
'Accept': "application/json"
},
timeout: 30000
});
HTTP.post(
`/someotherparams/restapiparams/${this.someinput}/someparameter/${this.moreinput}`,
{
something: "some text"
})
At the Vendor's End when i check the network of the browser, it shows that it is firing the following :
"BaseUrl/someotherparams/restapiparams/${this.someinput}//someparameter/${this.moreinput}"
As you can see there's an additional "/". Advance thanks for some guidance.
Note*: I've check the codes many times, the data in the data base for the this.someinput (does not contain '/') values. It works well for me, it did occur once from my support team. but the vendor is facing this issue every time.
Setup: NodeJS / Express / Helmet API running on Azure App Service, CORS set to allow * so should be all fine.
Client web setup running locally on NodeJS (http://localhost:3000)
I'm trying to POST some JSON from the web client to the API for login validating purposes. Works for some requests and not others, seemingly depending on what actual values I am posting.
I've got a bit of code that uses the Fetch API to send login details and validate them, as follows:
const response = await fetch(`${baseUrl}/auth/validate`, {
method: 'POST',
mode: 'cors',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({EmailAddress: email, Password: password}),
}).catch(error => {
alert('Unable to check login');
});
If the value of email and password are both just me leaning on the keyboard, say 'skdjflsjdf' then it's all fine - the server gets my POST, validates that the login is rubbish and bounces back my error. It allows it because I get the Access-Control-Allow-Origin: * header back, so Chrome is happy.
If the value of email is an actual email address, I don't get the Access-Control-Allow-Origin: * header back and Chrome gets very upset of course.
I can't even begin to imagine how I've gone wrong here and I certainly don't seem to be able to find the right phrase to Google for a sensible answer. I'd really appreciate any help... Thanks.