zehan12/anime

anime's Issues

CORS Error: Consider Implementing a Proxy Server or Backend API Handling

Issue Summary:

Clients may encounter CORS (Cross-Origin Resource Sharing) errors when attempting to access a remote API. This issue discusses potential solutions to address CORS errors by either setting up a proxy server or implementing proper handling in the backend API.

Issue Details:

Problem:

Clients, while trying to access a remote API, often encounter CORS errors due to browser security policies. These errors can be disruptive to client applications and need to be resolved for smooth operation.

Solution Options:

• Proxy Server: Setting up a proxy server is one solution to mitigate CORS issues. The proxy server, deployed on the server-side, acts as an intermediary between the client and the remote API. It forwards requests to the remote API and returns responses to the client, effectively bypassing CORS restrictions on the client-side.

• Backend API Handling: For those who control the backend API, configuring it to include the necessary 'Access-Control-Allow-Origin' header in responses can resolve the CORS problem. By permitting requests from the client's origin (e.g., 'http://localhost:5173/'), you can ensure proper CORS handling on the server-side.

Steps to Implement Proxy Server:

Create a server (e.g., using Node.js with Express) capable of handling requests from the client application.
Establish a dedicated route on the server for proxying requests to the remote API.
Within this route, make an HTTP request to the remote API and send the resulting response back to the client.
Implement robust error handling and security measures in the proxy server to maintain security and prevent misuse.

Steps to Implement Backend API Handling:

If you have control over the backend API, configure it to include the 'Access-Control-Allow-Origin' header in its responses.
Specify the client's origin ('http://localhost:5173/') in the 'Access-Control-Allow-Origin' header to permit requests from this origin.
Ensure that the backend API's CORS configuration aligns with your project's requirements, permitting the necessary HTTP methods and headers as needed.

Additional Considerations:

When setting up a proxy server, adhere to best security practices such as rate limiting and access control to prevent potential security vulnerabilities.
Select the solution (proxy server or backend API handling) that best suits your project's specific needs and constraints.

Please provide any additional context or details relevant to this issue.

Video Not Playing in Frontend

Issue Summary:

Videos are not playing in the AnimePlayer component of our React application. The video is expected to load and play in an iframe but remains unresponsive.

Steps to Reproduce:

Navigate to the page where AnimePlayer is rendered.
Select an anime episode to play.
Observe that the video does not play.

Expected Behavior:

The video should load and play automatically when an episode is selected.

Actual Behavior:

The video does not load or play. There's no visual feedback or error message in the UI.

Possible Causes Suggested:

CORS policy restrictions.
Incorrect video URL or parameters.
Network issues or content accessibility.
Restrictions from the video hosting service.

Code Snippet:

// VideoPlayer component
const VideoPlayer = ({ url }) => {
    return url ? <iframe src={`./embed.html?url=${url}`} title="Anime Video Player" style={{ width: '100%', height: '500px' }}></iframe> : <p>Loading video...</p>;
};

API Response

This response provides sufficient information, eliminating the need for further API requests. We can address the issue of video streaming by using data.results.stream.sources[0].file as the url in above code .

This version presents the information more clearly and concisely, focusing on the key point that the given data allows for direct streaming without additional API calls.

{
  "results": {
    "name": "Jujutsu Kaisen 2nd Season Episode 23 English Subbed",
    "episodes": "23",
    "stream": {
      "Referer": "https://embtaku.pro/streaming.php?id=MjE3NzAx&title=Jujutsu+Kaisen+2nd+Season+Episode+23&typesub=SUB",
      "sources": [
        {
          "file": "https://www042.vipanicdn.net/streamhls/31014405f62933f3613ce2ec15abf3c4/ep.23.1703789826.m3u8",
          "label": "hls P",
          "type": "hls"
        }
      ],
      "sources_bk": [
        {
          "file": "https://www042.anifastcdn.info/videos/hls/f-iCGE50mCNs6eqWX7og3w/1705194400/217701/31014405f62933f3613ce2ec15abf3c4/ep.23.1703789826.m3u8",
          "label": "hls P",
          "type": "hls"
        }
      ]
    },
    "servers": {
      "vidcdn": "https://embtaku.pro/embedplus?id=MjE3NzAx&token=8S1D1PfAFdkZiVrASa1prw&expires=1705187199",
      "streamwish": "https://awish.pro/e/196iqzhozdj9",
      "mp4upload": "https://www.mp4upload.com/embed-6zxehs39x31o.html",
      "doodstream": "https://dood.wf/e/efcz1och3q1h",
      "filelions": "https://alions.pro/v/me083w505scx"
    }
  }
}

Attempted Solutions:

Verified the video URL is correct and accessible.
Checked browser console for errors (no relevant errors found).
Tested with different video sources (issue persists).

Environment:

React version: 18
Browser: Chrome

Request for Help:

Any insights, suggestions, or solutions to resolve this issue would be greatly appreciated.