TypeError: Failed to fetch

[sonicviz]

I'm running a prototype locally and keep getting error: TypeError: Failed to fetch (see below).

Error: Connection error.
at Anthropic.makeRequest (core.mjs:297:1)
at async Proxy.sendPrompt (AIWriter2.vue:132:1)Caused by: TypeError: Failed to fetch
at Anthropic.fetchWithTimeout (core.mjs:354:1)
at Anthropic.makeRequest (core.mjs:286:1)
at async Proxy.sendPrompt (AIWriter2.vue:132:1)
AIWriter2.vue:150 Connection error.

The code and api key look fine. I have a similar test with OpenAI and no connection errors, it works fine.
I can also call Anthropic aok via a server function.

Unsure why this local call is giving me so much grief.
Setup looks fine, all the headers should be set automatically according to the docs.

.env file has ANTHROPIC_API_KEY = ""
and code is
const anthropic = new Anthropic({
apiKey: process.env['ANTHROPIC_API_KEY'], // This is the default and can be omitted
});

No errors on setup.

But the call
const message = await anthropic.messages.create({
max_tokens: 1024,
messages: [{ role: 'user', content: aiprompt.value }],
model: "claude-3-haiku-20240307",
});
just keeps giving me
Error: Connection error.
at Anthropic.makeRequest (core.mjs:297:1)
at async Proxy.sendPrompt (AIWriter2.vue:132:1)Caused by: TypeError: Failed to fetch
at Anthropic.fetchWithTimeout (core.mjs:354:1)
at Anthropic.makeRequest (core.mjs:286:1)
at async Proxy.sendPrompt (AIWriter2.vue:132:1)
AIWriter2.vue:150 Connection error.

What's up with that?
Is there some restriction on connecting from local development?

[RobertCraigie]

Can you reproduce this without using the SDK?

curl https://api.anthropic.com/v1/messages \
     --header "x-api-key: $ANTHROPIC_API_KEY" \
     --header "anthropic-version: 2023-06-01" \
     --header "content-type: application/json" \
     --data \
'{
    "model": "claude-3-5-sonnet-20240620",
    "max_tokens": 1024,
    "messages": [
        {"role": "user", "content": "Hello, world"}
    ]
}'

[sonicviz]

Thanks for test!

I can't get it to run in the terminal. Windows doesn't seem to like the \ and if I do it as an edited string as per the docs @ https://docs.anthropic.com/en/api/getting-started with

curl https://api.anthropic.com/v1/messages --header "x-api-key: YOUR_API_KEY" --header "anthropic-version: 2023-06-01" --header "content-type: application/json" --data '{"model": "claude-3-5-sonnet-20240620","max_tokens": 1024,"messages": [{"role": "user", "content": "Hello, world"}]}'

it throws

Invoke-WebRequest : A positional parameter cannot be found that accepts argument '--header'.
At line:1 char:1

• curl https://api.anthropic.com/v1/messages --header "x-api-key: sk-an ...

•   + CategoryInfo          : InvalidArgument: (:) [Invoke-WebRequest], ParameterBindingException
    + FullyQualifiedErrorId : PositionalParameterNotFound,Microsoft.PowerShell.Commands.InvokeWebRequestCommand
  
  

Did I miss a space somewhere?
Tried in both windows terminal and VSCode terminal

[RobertCraigie]

Ah you'll need to use WSL or find a windows alternative to curl as that's unix only

[sonicviz]

Can't use WSL atm. I tried wget and have the same error.
I had a similar issue once with anyscale API if I recall, they did some restrictions on CORS which made it impossible to run locally in windows. I wonder if it's a similar issue, or something else.

API call looks fine, Key is fine.

[sonicviz]

ah wait.

Wget does work, but gets the same error as the app.

 wget

cmdlet Invoke-WebRequest at command pipeline position 1
Supply values for the following parameters:
Uri: https://api.anthropic.com/v1/messages --header "x-api-key: apikey" --header "anthropic-version: 2023-06-01" --header "content-type: application/json" --data '{"model": "claude-3-5-sonnet-20240620","max_tokens": 1024,"messages": [{"role": "user", "content": "Hello, world"}]}'
wget : {"type":"error","error":{"type":"not_found_error","message":"Not Found"}}
At line:1 char:1
+ wget
+ ~~~~
    + CategoryInfo          : InvalidOperation: (System.Net.HttpWebRequest:HttpWebRequest) [Invoke-WebRequest], WebException
    + FullyQualifiedErrorId : WebCmdletWebResponseException,Microsoft.PowerShell.Commands.InvokeWebRequestCommand

Well, a little different "TypeError: Failed to fetch" vs ""type":"not_found_error" but not sure if that's coincidental or related.

Actually it's the same if you use curl in the VSCode terminal.

I rarely use Curl or Wget.
Should I give Postman a shot?

[sonicviz]

hmm. I think I set Postman up correctly but I still get a 405 error:
{
"type": "error",
"error": {
"type": "invalid_request_error",
"message": "Method Not Allowed"
}
}

405 doesn't exist on https://docs.anthropic.com/en/api/errors

[RobertCraigie]

Did you make sure it's a post request?

[sonicviz]

oops, my bad.

That gives me a 400 {
"type": "error",
"error": {
"type": "invalid_request_error",
"message": "The request body is not valid JSON: unexpected character: line 1 column 1 (char 0)"
}

is the data payload a param or body?
In any event, either gives the same error. 

I added the requisite headers that are needed.

[RobertCraigie]

you put the data in query params instead of the request body.

regardless, this is likely an API issue, are you connecting from a supported country? https://www.anthropic.com/supported-countries

[sonicviz]

Japan. No VPN.

OpenAI and other API's from the same prototype have no problems.

Edit:
OpenAI does require an addition setting to work locally though, though it's really just for key security (or warning due to lack thereof):
const openai = new OpenAI({
apiKey: process.env['OPENAI_API_KEY'],
dangerouslyAllowBrowser: true // This is the default and can be omitted
});

[sonicviz]

Is this https://simonwillison.net/2024/Aug/23/anthropic-dangerous-direct-browser-access/ the fix for this issue?

[RobertCraigie]

ah are you running your code in the browser?

[sonicviz]

-> #466 (comment)

Seems fixed now, as you've implemented what I referenced there. Thanks!