Portal not calling the API proxy

[#1]

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.

[#2]

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

[dchiesa1]

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
        

[#4]

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.

[dchiesa1]

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.

[#6]

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?

[dchiesa1]

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>

[#8]

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.

[dchiesa1]

GREAT to hear. I'm glad it helped.