I created an API proxy and a portal. I used the editor to create a spec. I just took the default spec and made a small change. The problem is when I try to use the APIs from the portal it adds the URL from the portal instead of calling the proxy API. {portal url}/persons instead of {proxy api}/persons. I put a trace on the API and it never gets called. What could I be doing wrong that the portal is calling the URL of the portal instead of the api proxy?
My goal is to create the API from swagger and use the json from swagger to create the spec.
I created a new API proxy using the URL from the videos https://now.httpbin.org/
Iām getting the same issue.
This is the spec I created. I just modified my swagger.json file.
swagger: '2.0'
info:
version: v1
title: API
paths:
/:
get:
consumes: []
produces:
- text/plain
- application/json
- text/json
responses:
'200':
description: Success
schema:
type: array
items:
$ref: '#/definitions/Test'
definitions:
Test:
type: object
properties:
epoch:
type: string
slang_date:
type: string
slang_time:
type: string
iso8601:
type: string
rfc2822:
type: string
rfc3339:
type: string
urls:
type: string
I think your spec does not include a host, basepath, or scheme. Your formatting did not come through because you didnāt click the code button before pasting in your yaml. I think you are using this:
swagger: '2.0'
info:
version: v1
title: API
paths:
/:
get:
consumes: []
produces:
- text/plain
- application/json
- text/json
responses:
'200':
description: Success
schema:
type: array
items:
$ref: '#/definitions/Test'
definitions:
Test:
type: object
properties:
epoch:
type: string
slang_date:
type: string
slang_time:
type: string
iso8601:
type: string
rfc2822:
type: string
rfc3339:
type: string
urls:
type: string
Try something like this:
swagger: '2.0'
info:
version: v1
title: API
schemes:
- https
host: "www.seanmoline.com"
basePath: "/"
paths:
/:
get:
consumes: []
produces:
- text/plain
- application/json
- text/json
responses:
'200':
description: Success
schema:
type: array
items:
$ref: '#/definitions/Test'
definitions:
Test:
type: object
properties:
epoch:
type: string
slang_date:
type: string
slang_time:
type: string
iso8601:
type: string
rfc2822:
type: string
rfc3339:
type: string
urls:
type: string
That helped me make progress, thank you. I still have 1 more issue. Iām getting back TypeError: Failed to fetch. I noticed you had the same thing in the videos. I would like to get back the json and display it. How would I go about doing that? I added CORS to my API proxy just in case that was the issue.
CORS could be the issue. āFailed to fetchā means the JavaScript code couldnāt complete a successful request to the address you specified. Possible reasons for this failure are:
- the host name you specified is not valid
- the scheme (http or https) is not the one your endpoint is listening on
- The basepath isnāt correct
- CORS is not set up properly. Itās not always a simple matter of āadding CORSā to your proxy. You need to make sure the headers are all allowed.
- there is no network connectivity between the Web page and your API proxy for some other reason.
If I were diagnosing this, I would use the Developer Tools available inside the browser (MS Edge, Google Chrome, Safari, Firefox, etc) to understand better what is happening. If it is CORS you should see a clear message indicating same.
CORS can be hard to sort out. If your request includes specific Headers, verbs, referrers, ā¦ you may need to adjust the CORS response. Also, you need to make sure the CORS response headers get applied to every response back to the requester. Itās easy to get this wrong at first, so double and triple check everything.
Also - the CORS setting in the browser can be āstickyā. If you try a connection and get rejected for lack of CORS, the browser may ārememberā that restriction, andā¦ even if you change the API proxy to respond appropriately with CORS, the browser may not even bother. To work around this you can try waiting a bit, or use a new incognito/anonymous browser window.
1 Like
I was able to get the portal to work with GET, but Iām getting CORS issues with POST. Response to preflight request doesnāt pass access control check: No āAccess-Control-Allow-Originā header is present on the requested resource. I made a jquery AJAX call to the API and proxy, and Iām getting the same response back from both. Is there something I can add to the proxy fix the CORS issues, or does this have to be fixed on the API side?
You can add an AssignMessage policy to the API Proxy to satisfy the CORS requirements. The AssignMessage policy needs to specify the origins from which inbound calls should be allowed. You can also specify a wildcard.
Here is an example AssignMessage policy that is very permissive.
<AssignMessage name="AM-CORSResponse">
<Add>
<Headers>
<Header name="Access-Control-Allow-Origin">*</Header>
<Header name="Access-Control-Allow-Headers">*</Header>
<Header name="Access-Control-Max-Age">3628800</Header>
<Header name="Access-Control-Allow-Methods">OPTIONS, GET, PUT, POST, DELETE</Header>
</Headers>
</Add>
<IgnoreUnresolvedVariables>true</IgnoreUnresolvedVariables>
<AssignTo createNew="false" transport="http" type="response"/>
</AssignMessage>
<br>
Thank you for all the help. I was able to get it working. I enabled CORS on the server side, so I had to change ADD to SET. I also did {request.header.origin} that I found in the documentation. I was passing a field in the headers even on GET requests and that was causing problems. Doing * on the headers worked. I will make it more secure later, but for now happy to just have it working.
GREAT to hear. Iām glad it helped.