oo

Enabling Cross-Origin Resource Sharing

When a server from a different domain tries to access Liferay web services, the cross-origin resource sharing (CORS) policy allows or denies each request. See setting up CORS to learn more.

Clarity Vision Solutions may choose to create a Liferay object for users to have customized profile fields. Follow the steps below to see an example of this with a React application running locally.

  1. Create a Liferay object.

    • Navigate to Global Menu (Global Menu) → Control PanelObjects.
    • Click Add (Add icon).
    • Enter the following object:
      • Label: J4X7-Object
      • Plural Label: J4X7-Objects
      • Name: J4X7Object
    • Click Save.
    • Select the J4X7-Object you just created. Click the Fields tab.
    • Click Add (Add icon) and add the following field:
      • Label: name
      • Field Name: name
      • Type: Text
    • Click Save.
    • Click Add (Add icon) and add the following field:
      • Label: description
      • Field Name: description
      • Type: Text
    • Click Save.
    • Click back to the Details tab and click Publish.
  2. Download and unzip the React application.

    curl https://resources.learn.liferay.com/dxp/latest/en/building-applications/developing-a-javascript-application/using-react/liferay-j4x7.zip -O
    
    unzip liferay-j4x7.zip
    
    cd liferay-j4x7
    
  3. Navigate to the application’s folder and start the React server.

    cd j4x7-custom-element
    
    yarn start
    
  4. Try to add a J4X7 object entry. Enter foo as the name and description and click Add.

    Try to add a J4X7 object entry.

    See that the entry was prevented from being added.

  5. In Liferay, navigate to Global Menu (Global Menu) → Control PanelInstance Settings.

  6. Add a CORS policy for the object.

    • Click Security Tools.
    • Click Portal Cross-Origin Resource Sharing (CORS) in the left navigation.
    • Click Add.
    • Enter Foo as the name.
    • Add a URL Pattern with the value /o/c/j4x7objects/* and click Update.
  7. Back in the React app, add a J4X7 object entry. Enter foo as the name and description and click Add.

    A J4X7 object entry is successfully added.

    With the CORS policy updated, a J4X7 object entry is now successfully added.

Excellent! You have now configured CORS, and you have completed the Securing Web Services module.

Next: Authorizing and Single Sign-On