{"id":1616,"date":"2019-06-25T22:21:54","date_gmt":"2019-06-25T14:21:54","guid":{"rendered":"https:\/\/www.techcoil.com\/blog\/?p=1616"},"modified":"2020-05-12T10:56:42","modified_gmt":"2020-05-12T02:56:42","slug":"how-to-solve-no-api-definition-provided-error-for-flask-restplus-app-on-cloud-foundry","status":"publish","type":"post","link":"https:\/\/www.techcoil.com\/blog\/how-to-solve-no-api-definition-provided-error-for-flask-restplus-app-on-cloud-foundry\/","title":{"rendered":"How to solve “No API definition provided” error for Flask-RESTPlus app on Cloud Foundry"},"content":{"rendered":"

When you create an API endpoint that generates a QRCode with Flask-RESTPlus<\/a>, you may want to deploy it onto Cloud Foundry. <\/p>\n

However, when I first tried to do so, I was greeted with a \"No API definition provided<\/strong>\" when I accessed the Swagger<\/a> Api portal page. <\/p>\n

\"qrcodeapp<\/p>\n

So why is there a \"No API definition provided<\/strong>\" error for Flask-RESTPlus<\/a> app on Cloud Foundry<\/a>? <\/p>\n

In case you are facing such a problem, this post discuss how I had managed to solve the \"No API definition provided<\/strong>\" error for my Flask-RESTPlus app on Cloud Foundry.<\/p>\n

Having an idea of how the Flask-RESTPlus app was deployed on Cloud Foundry<\/h2>\n

Before diving into the solution, it is helpful to know how the Flask-RESTPlus app was deployed onto Cloud Foundry. <\/p>\n

In addition to the python file, the QRCode app was pushed to a Cloud Foundry environment with the following manifest file:<\/p>\n

\r\n---\r\napplications:\r\n- name: QRCodeApp\r\n  memory: 256MB\r\n  disk_quota: 256MB\r\n  random-route: true\r\n  buildpack: python_buildpack\r\n  command: python run_app.py\r\n  instances: 1\r\n<\/pre>\n
Given that, Cloud Foundry will make the Flask-RESTPlus app accessible via https:\/\/qrcodeapp.somcfurl.com. <\/p>\n
Whenever HTTP request<\/a> is made to that endpoint, the reverse proxy server<\/a> will proxy HTTP requests to the web application that was started with the following command:<\/p>\n
\r\npython run_app.py\r\n<\/pre>\n
Finding out why there is a \"No API definition provided<\/strong>\" error with Chrome Inspector<\/h2>\n
Whenever there is a problem with a web page that you are accessing, the Chrome Inspector<\/a> is a tool that can tell you more about the problem.<\/p>\n
Given that, I started the Chrome Inspector and found the following error message:<\/p>\n
\nMixed Content: The page at 'https:\/\/qrcodeapp.somcfurl.com\/api\/' was loaded over HTTPS, but requested an insecure resource 'http:\/\/qrcodeapp.somcfurl.com\/api\/swagger.json'. This request has been blocked; the content must be served over HTTPS.
\n(anonymous) @ index.js:1\n<\/p><\/blockquote>\n
So what does this error message mean?<\/p>\n
Since Cloud Foundry had served our portal page over HTTPS, our Chrome browser expects that subsequent requests should be made via HTTPS.<\/p>\n
However, our command had started the Flask-RESTPlus app serving HTTP requests over HTTP.<\/p>\n
Therefore, there was a call made to retrieve a resource (http:\/\/qrcodeapp.somcfurl.com\/api\/swagger.json) via HTTP in the HTML document that was returned as a HTTP response<\/a> to the browser.<\/p>\n
Since that call was block, the bootstrapping JavaScript code from Swagger was unable to replace<\/strong> the \"No API definition provided<\/strong>\" text with the elements of the API portal.<\/p>\n
Instructing the Flask-RESTPlus Api object to generate urls with the HTTPS scheme instead of HTTP<\/h2>\n
Since there is a mismatch of scheme used, we have to configure the Flask-RESTPlus Api<\/a> object to generate urls with HTTPS instead of HTTP.<\/p>\n
In addition to that, we want to be able to test our Flask-RESTPlus app in our development machine when we access the API portal via HTTP. <\/p>\n
Given that, we need a way for our Flask-RESTPlus app to know when to generate urls with HTTPS.<\/p>\n
As I had mentioned previously, we can get the environment variables supplied to our Cloud Foundry application with Python 3 Flask<\/a>. Given that, we can get a list of environment variables that are supplied to our Flask-RESTPlus app on Cloud Foundry. We can then check the existence of one of the environment variables to determine whether our app is on Cloud Foundry.<\/p>\n
For example, the following code checks for the VCAP_SERVICES<\/strong> environment variable before instructing the Flask-RESTPlus Api object to generate urls with HTTPS instead of HTTP:<\/p>\n
\r\nfrom flask import url_for\r\nfrom flask_restplus import Api\r\n\r\nif os.environ.get('VCAP_SERVICES'):\r\n    @property\r\n    def specs_url(self):\r\n        return url_for(self.endpoint('specs'), _external=True, _scheme='https')\r\n\r\n    Api.specs_url = specs_url\r\n<\/pre>\n
Putting the above code fragment with our QRCode app, we yield the following code:<\/p>\n
\r\nfrom flask import Flask, Blueprint, request, send_file, url_for\r\nfrom flask_restplus import Api, Namespace, Resource, fields\r\nfrom io import BytesIO\r\n \r\nimport os, qrcode\r\n \r\n# Create Flask app\r\napp = Flask(__name__)\r\n \r\n# Associate Api with Blueprint\r\napi_blueprint = Blueprint('API', __name__)\r\n\r\nif os.environ.get('VCAP_SERVICES'):\r\n    @property\r\n    def specs_url(self):\r\n        return url_for(self.endpoint('specs'), _external=True, _scheme='https')\r\n\r\n    Api.specs_url = specs_url\r\n\r\napi = Api(api_blueprint,\r\n    title='Api for QR code app',\r\n    version='1.0',\r\n    description='This is an API for QR code app',\r\n    # All API metadatas\r\n)\r\n \r\n# Create namespace for containing Qr Code related operations\r\nqrcode_namespace = Namespace('QrCode', description='Qr code related operations')\r\n# Specify uri of qrcode namespace as \/qrcode\r\napi.add_namespace(qrcode_namespace, path='\/qrcode')\r\n# Specify uri of api blueprint as \/api\r\napp.register_blueprint(api_blueprint, url_prefix='\/api')\r\n \r\n# Define input model\r\nqrcode_creation_input = qrcode_namespace.model('QRCode creation Input', {\r\n    'value': fields.String(required=True, description='The value that is supposed to be encoded into qrcode'),\r\n})\r\n \r\n \r\n# Define API endpoint for creating Qr Code image\r\n@qrcode_namespace.route('\/')\r\n@qrcode_namespace.doc('Creates a QRCode image based on a string value.')\r\nclass QrCodeRoot(Resource):\r\n \r\n    @qrcode_namespace.expect(qrcode_creation_input)\r\n    @qrcode_namespace.produces(['image\/png'])\r\n    @qrcode_namespace.response(200, description='Return QR Code png image file.')\r\n    @qrcode_namespace.response(400, description='Invalid input provided.')\r\n    def post(self):\r\n \r\n        # Get value to encode into QR Code\r\n        json_input = request.get_json()\r\n        value_to_turn_into_qrcode = json_input['value']\r\n \r\n        # Create qr code image and return it as HTTP response\r\n        pil_img = qrcode.make(value_to_turn_into_qrcode)\r\n        img_io = BytesIO()\r\n        pil_img.save(img_io, 'PNG')\r\n        img_io.seek(0)\r\n        return send_file(img_io, mimetype='image\/png')\r\n \r\n \r\nif __name__ == '__main__':\r\n    port = int(os.getenv("PORT", "5678"))\r\n    app.run(host='0.0.0.0', port=port)\r\n<\/pre>\n
Once I had deployed the code changes to Cloud Foundry, I am able to access the API portal without the \"No API definition provided<\/strong>\" error.<\/p>\n\n