Comments (3)
I think this may be actually 2 bugs though:
fetch-jsonp
callsresolve()
and removes the script on the first usage of the function
fetch-jsonp/src/fetch-jsonp.js
Lines 40 to 52 in 85d90c7
- A Mailchimp bug, that they are not including a semicolon between the function calls (or maybe
,
or||
or&&
instead, if it's supposed to be a JavaScript expression)
from fetch-jsonp.
Looking into JSONP more, it seems like it's pretty standard to have only a single function call.
@camsong So if that's the convention, I'm happy to have this issue closed - because it would be only that Mailchimp is breaking that convention.
from fetch-jsonp.
To work around this issue, we ended up writing our own Next.js Route Handler which passes along the request query parameters and fixes the Mailchimp response (only shows the first error):
app/api/mailchimp-subscriptions/route.ts
import { NextRequest, NextResponse } from 'next/server';
type MailchimpSubscriptionsResponseBodyGet = string;
// Fix broken Mailchimp JSONP responses (double function calls)
// https://github.com/camsong/fetch-jsonp/issues/72#issuecomment-2220956128
export async function GET(
request: NextRequest,
): Promise<NextResponse<MailchimpSubscriptionsResponseBodyGet>> {
const url = new URL(request.url);
url.hostname = 'xxx.us20.list-manage.com';
url.pathname = '/subscribe/post-json';
url.port = '';
const searchParams = request.nextUrl.searchParams;
const callbackFunctionName = searchParams.get('c');
try {
const response = await fetch(url.toString());
if (!response.ok) {
return new NextResponse(
`${callbackFunctionName}({"result":"error","msg":"Invalid response status"})`,
);
}
const textResponse = await response.text();
const firstJsonpFunctionCall = textResponse.match(
new RegExp(`^${callbackFunctionName}\\(\\{[^}]+\\}\\)`),
);
if (!firstJsonpFunctionCall) {
return new NextResponse(
`${callbackFunctionName}({"result":"error","msg":"Invalid response format"})`,
);
}
return new NextResponse(firstJsonpFunctionCall[0], {
headers: {
'Content-Type': 'application/javascript',
},
});
} catch (error) {
return new NextResponse(
`${callbackFunctionName}({"result":"error","msg":"${(error as Error).message}"})`,
);
}
}
Then just change your call to fetchJsonp()
to use the new Route Handler instead of Mailchimp directly:
const response = await fetchJsonp(
- `https://xxx.us20.list-manage.com/subscribe/post-json?u=xxx&id=xxx&${new URLSearchParams({ EMAIL: email }).toString()}`,
+ `/api/mailchimp-subscriptions?u=xxx&id=xxx&${new URLSearchParams({ EMAIL: email }).toString()}`,
{
jsonpCallback: 'c',
},
);
from fetch-jsonp.
Related Issues (20)
- CORS FETCH on IE9 HOT 1
- error in ie8 HOT 2
- Does it support react native?How to use jsonp in react native? HOT 1
- Uncaught ReferenceError: jsonCallback is not defined HOT 2
- could you support the interface return a variable HOT 1
- Place callback parameter first inline HOT 1
- Trying to use fetch-jsonp to fech TEXT only value HOT 1
- CDNJS link wrong
- [BUG] There is no jsonCallbackFunction HOT 1
- add support for abort signal??? HOT 2
- Library does not support nonce HOT 1
- Call the local interface in react to report timed out HOT 2
- Multiple requests - being silently aborted and throwing timeouts etc?
- how to import? HOT 1
- How can i change MIME type? HOT 1
- fetch-jsonp HOT 1
- Required options
- Provide an esm version HOT 1
- Provide a fetchPriority option
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fetch-jsonp.