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:
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.
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 <Header name="Access-Control-Allow-Origin">{request.header.origin}</Header> 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.