XMLHttpRequest error
yakou32 opened this issue · 13 comments
I've tested my Sendgrid parameters with Postman: they work fine.
However, in Flutter for web, these generate an XMLHttpRequest error, using the readme example.
Is this related with the fact that my prototype is currently working in localhost?
Hey @yakou32
This is an issue with CORS on browsers.
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
In order to interact with external APIs directly from the browser, you're going to have to make the calls from your own web server.
You could also disable CORS on your browser for testing, however this not feasible for production apps
Can you explain a little more how to solve this problem, I have the same error and I'am not able to figure out how to solve it.
I really like this plug in helped with my project a lot, but I need a stable version of WEB.
PS. improve pugni description and maybe tag it was hard to find as plugin.
`Error: XMLHttpRequest error.
dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 906:28 get current
packages/http/src/browser_client.dart 71:22 <fn>
dart-sdk/lib/async/zone.dart 1612:54 runUnary
dart-sdk/lib/async/future_impl.dart 152:18 handleValue
dart-sdk/lib/async/future_impl.dart 704:44 handleValueCallback
dart-sdk/lib/async/future_impl.dart 733:13 _propagateToListeners
dart-sdk/lib/async/future_impl.dart 530:7 [_complete]
dart-sdk/lib/async/stream_pipe.dart 61:11 _cancelAndValue
dart-sdk/lib/async/stream.dart 1219:7 <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 324:14 _checkAndCall
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 329:39 dcall
dart-sdk/lib/html/dart2js/html_dart2js.dart 37307:58 <fn>
at Object.createErrorWithStack (http://localhost:53472/dart_sdk.js:5044:12)
at Object._rethrow (http://localhost:53472/dart_sdk.js:37476:16)
at async._AsyncCallbackEntry.new.callback (http://localhost:53472/dart_sdk.js:37472:13)
at Object._microtaskLoop (http://localhost:53472/dart_sdk.js:37332:13)
at _startMicrotaskLoop (http://localhost:53472/dart_sdk.js:37338:13)
at http://localhost:53472/dart_sdk.js:33109:9`
I'm not a specialist...
In my understanding, this kind of error is caused by the fact that your project is developed locally. Therefore, you are trying to send an email from your localhost. This is restricted by the browsers (CORS).
Actually, I didn't find any solution to solve this, but to test the mail sending feature online. I tried some browser plugin to remove this limitation while developing, with no success.
It's quite cumbersome for my development process, and I would gladly appreciate any advise to adopt a better work process to handle mailing features development...
@dylanshine Pleas help me I still have this issue in production. I am using the Firebase Hosting to deploy the website and so i tried adding
this code to firebase.json
"headers": [ {
"source" : "**",
"headers" : [ {
"key" : "Access-Control-Allow-Origin",
"value" : "*"
} ]
}]
But nothing works. Any solution?
@kekko7072 Are you still making the request from the Flutter application in the browser?
@kekko7072 Are you still making the request from the Flutter application in the browser?
Yes I don't know how to make the differently... What should I use? Functions?
@dylanshine Can you give me an example thank you so much!
@kekko7072, the package listing that auto-generates on Pub.dev makes this library misleading for Flutter Web. Essentially for security reasons, you can't make external requests to outside resources within a browser. What I suggest you do is create a Firebase function that calls the https://docs.sendgrid.com/api-reference/mail-send/mail-send API directly, then within your Flutter Web application, simply invoke that function.
@kekko7072, the package listing that auto-generates on Pub.dev makes this library misleading for Flutter Web. Essentially for security reasons, you can't make external requests to outside resources within a browser. What I suggest you do is create a Firebase function that calls the https://docs.sendgrid.com/api-reference/mail-send/mail-send API directly, then within your Flutter Web application, simply invoke that function.
Thank you so much I created a Firebase Function and invoke it if platform is web and now it works perfectly. I think should be added to the description of the plugin to help the spead. if you want this is my typescript code:
import * as functions from "firebase-functions";
import sgMail = require("@sendgrid/mail");
sgMail.setApiKey("API KEY"
);
exports.request = functions.https.onCall(async (req, context) => {
sgMail
.send({
to: req.to,
from: req.sender,
subject: req.subject,
cc: req.ccList,
content: [
{
type: "text/plain",
value: req.content,
},
],
})
.then(
(result) => {},
(err) => {
throw new functions.https.HttpsError(
"invalid-argument",
err.response.body
);
}
);
});
@kekko7072 Make a pull request detailing this in the READ.ME and I'd be more than happy to add it
@kekko7072, the package listing that auto-generates on Pub.dev makes this library misleading for Flutter Web. Essentially for security reasons, you can't make external requests to outside resources within a browser. What I suggest you do is create a Firebase function that calls the https://docs.sendgrid.com/api-reference/mail-send/mail-send API directly, then within your Flutter Web application, simply invoke that function.
Thank you so much I created a Firebase Function and invoke it if platform is web and now it works perfectly. I think should be added to the description of the plugin to help the spead. if you want this is my typescript code:
import * as functions from "firebase-functions"; import sgMail = require("@sendgrid/mail"); sgMail.setApiKey("API KEY" ); exports.request = functions.https.onCall(async (req, context) => { sgMail .send({ to: req.to, from: req.sender, subject: req.subject, cc: req.ccList, content: [ { type: "text/plain", value: req.content, }, ], }) .then( (result) => {}, (err) => { throw new functions.https.HttpsError( "invalid-argument", err.response.body ); } ); });
Hey @yakou32
This is an issue with CORS on browsers. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
In order to interact with external APIs directly from the browser, you're going to have to make the calls from your own web server.
You could also disable CORS on your browser for testing, however this not feasible for production apps
If everything works fine, when we try from the backend(server). Than why in the whole world, this service is given as a flutter library? When it does not works with frontend? What is the use of this SDK in flutter?
It works for ios, android, linux, windows and mac...just not web.