cURL coding.
cURL is a command-line tool and library used for transferring data with URLs. It supports multiple protocols such as HTTP, HTTPS, FTP, and more. Here are some basic cURL command examples for various use cases:
### 1. **Basic GET Request**
“`bash
curl https://example.com
“`
This fetches the content of the given URL and displays it in the terminal.
—
Not what I asked for. I have a lot of errors in this script which wass written by copilot. Should I share the errors first or the code first
It’s usually best to share the **errors first**, along with a brief description of the problem or the intended functionality of your script. This helps identify whether the errors stem from syntax, logic, or environment issues.
Once we have the errors, sharing the code allows for troubleshooting in context. If the script is lengthy, focus on sharing relevant portions or indicate the specific lines related to the errors.
Access to fetch at ‘https://serpapi.com/search.json?engine=ebay&q=sega&api_key=0d17888ebb6912c39b6abb5c18b3cc183691deee6fb444bb7aa5e9fd22772a7c’ from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.Understand this errorAI
pricer.html:43
GET https://serpapi.com/search.json?engine=ebay&q=sega&api_key=0d17888ebb6912c39b6abb5c18b3cc183691deee6fb444bb7aa5e9fd22772a7c net::ERR_FAILED 400 (Bad Request)
searchEbay @ pricer.html:43
onclick @ pricer.html:19Understand this errorAI
pricer.html:81 Error fetching data: TypeError: Failed to fetch
at searchEbay (pricer.html:43:13)
at HTMLButtonElement.onclick (pricer.html:19:40)
(anonymous) @ pricer.html:81
Promise.catch
searchEbay @ pricer.html:80
onclick @ pricer.html:19Understand this errorAI
pricer.html:43 Fetch failed loading: GET “https://serpapi.com/search.json?engine=ebay&q=sega&api_key=0d17888ebb6912c39b6abb5c18b3cc183691deee6fb444bb7aa5e9fd22772a7c”.
searchEbay @ pricer.html:43
onclick @ pricer.html:19
This error stems from two main issues:
1. **CORS Policy**: The server (`serpapi.com`) does not allow your frontend application to fetch data directly. This is because no `Access-Control-Allow-Origin` header is returned in the response, meaning cross-origin requests from your domain are not permitted.
2. **Bad Request (400)**: The `GET` request likely contains incorrect parameters or an invalid API key, which causes the server to reject the request.
—
### Solutions:
#### 1. **Fix the CORS Issue**
– **Option 1: Use a Backend Proxy**
Your frontend cannot directly make cross-origin requests if the server doesn’t support it. Use a backend server to relay the request:
– Create a backend using Node.js, Python, etc.
– Fetch data from `serpapi.com` on your backend and send it to your frontend.
Example with Node.js (Express):
“`javascript
const express = require(‘express’);
const fetch = require(‘node-fetch’);
const app = express();
app.get(‘/search’, async (req, res) => {
const response = await fetch(‘https://serpapi.com/search.json?engine=ebay&q=sega&api_key=YOUR_API_KEY’);
const data = await response.json();
res.json(data);
});
app.listen(3000, () => console.log(‘Server running on http://localhost:3000’));
“`
Then call your backend endpoint (`/search`) from your frontend.
– **Option 2: Use a CORS Proxy Service** *(not recommended for production due to security concerns)*:
“`javascript
const url = ‘https://cors-anywhere.herokuapp.com/https://serpapi.com/search.json?engine=ebay&q=sega&api_key=YOUR_API_KEY’;
fetch(url).then(response => response.json()).then(console.log);
“`
#### 2. **Validate the Request**
– Ensure the URL is constructed correctly and the API key is valid. Use the following format:
“`
https://serpapi.com/search.json?engine=ebay&q=sega&api_key=YOUR_API_KEY
“`
– Check that `q=sega` matches the expected query parameter format.
#### 3. **Handle Errors Gracefully**
Modify your `searchEbay` function to handle errors more effectively:
“`javascript
async function searchEbay() {
const url = ‘https://serpapi.com/search.json?engine=ebay&q=sega&api_key=YOUR_API_KEY’;
try {
const response = await fetch(url);
if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
const data = await response.json();
console.log(data);
} catch (error) {
console.error(‘Error fetching data:’, error.message);
}
}
“`
#### 4. **Test API Requests**
Use tools like Postman to verify your API key and query parameters independently of the frontend.
#### 5. **Set `mode: ‘no-cors’` (Last Resort)**
If you don’t need to access the response body (e.g., if logging requests only):
“`javascript
fetch(url, { mode: ‘no-cors’ })
.then(() => console.log(‘Request sent’));
“`
This won’t solve most use cases but can bypass CORS in some cases.
—
Let me know if you’d like assistance implementing any of these solutions!
Yes! please use the provided api key which is already in the script:::
body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
.search-container { width: 80%; margin: 20px auto; }
.result-item { border: 1px solid #ddd; margin-bottom: 15px; padding: 10px; }
.title { font-weight: bold; }
.snippet { color: #555; }
eBay Search with cURL
function searchEbay() {
let query = document.getElementById(‘searchQuery’).value.trim();
let apiKey = ‘0d17888ebb6912c39b6abb5c18b3cc183691deee6fb444bb7aa5e9fd22772a7c’; // Replace with your SerpApi API key
console.log(‘Before API key check’);
if (!apiKey || apiKey === ‘YOUR_API_KEY_HERE’) {
alert(‘Please replace YOUR_API_KEY_HERE with your actual SerpApi API key.’);
console.log(‘API key check failed’);
return;
}
console.log(‘After API key check’);
if (!query) {
alert(‘Search query cannot be empty!’);
return;
}
let url = `https://serpapi.com/search.json?engine=ebay&q=${encodeURIComponent(query)}&api_key=${apiKey}`;
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error(‘Network response was not ok’);
}
return response.json();
})
.then(data => {
let resultsDiv = document.getElementById(‘results’);
resultsDiv.innerHTML = ”;
if (!data.organic_results || data.organic_results.length === 0) {
resultsDiv.textContent = ‘No results found.’;
return;
}
data.organic_results.forEach(result => {
const resultItem = document.createElement(‘div’);
resultItem.className = ‘result-item’;
const titleDiv = document.createElement(‘div’);
titleDiv.className = ‘title’;
const link = document.createElement(‘a’);
link.href = result.link;
link.target = ‘_blank’;
link.textContent = result.title;
titleDiv.appendChild(link);
const snippetDiv = document.createElement(‘div’);
snippetDiv.className = ‘snippet’;
snippetDiv.textContent = result.snippet;
resultItem.appendChild(titleDiv);
resultItem.appendChild(snippetDiv);
resultsDiv.appendChild(resultItem);
});
})
.catch(error => {
console.error(‘Error fetching data:’, error);
document.getElementById(‘results’).textContent = ‘An error occurred while fetching results.’;
});
}
To resolve the **CORS issue** in your provided script, you’ll need to introduce a backend proxy or use a CORS proxy service. Here’s how you can address this:
—
### **Updated Approach with a Backend Proxy**
Below is a Node.js-based backend to handle the API request. This will bypass the CORS restrictions:
#### **Backend Setup (Node.js + Express)**
1. Install dependencies:
“`bash
npm install express node-fetch
“`
2. Create `server.js`:
“`javascript
const express = require(‘express’);
const fetch = require(‘node-fetch’);
const app = express();
const PORT = 3000;
app.use(express.json());
app.get(‘/api/search’, async (req, res) => {
const { query } = req.query;
const apiKey = ‘0d17888ebb6912c39b6abb5c18b3cc183691deee6fb444bb7aa5e9fd22772a7c’;
if (!query) {
return res.status(400).json({ error: ‘Query parameter is required’ });
}
const url = `https://serpapi.com/search.json?engine=ebay&q=${encodeURIComponent(query)}&api_key=${apiKey}`;
try {
const response = await fetch(url);
const data = await response.json();
res.json(data);
} catch (error) {
console.error(‘Error fetching data:’, error);
res.status(500).json({ error: ‘Failed to fetch data’ });
}
});
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
“`
3. Start the server:
“`bash
node server.js
“`
—
### **Frontend Changes**
Now, update your `searchEbay` function to call your backend instead of directly accessing the API:
“`javascript
function searchEbay() {
let query = document.getElementById(‘searchQuery’).value.trim();
if (!query) {
alert(‘Search query cannot be empty!’);
return;
}
const url = `http://localhost:3000/api/search?query=${encodeURIComponent(query)}`;
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error(‘Network response was not ok’);
}
return response.json();
})
.then(data => {
let resultsDiv = document.getElementById(‘results’);
resultsDiv.innerHTML = ”;
if (!data.organic_results || data.organic_results.length === 0) {
resultsDiv.textContent = ‘No results found.’;
return;
}
data.organic_results.forEach(result => {
const resultItem = document.createElement(‘div’);
resultItem.className = ‘result-item’;
const titleDiv = document.createElement(‘div’);
titleDiv.className = ‘title’;
const link = document.createElement(‘a’);
link.href = result.link;
link.target = ‘_blank’;
link.textContent = result.title;
titleDiv.appendChild(link);
const snippetDiv = document.createElement(‘div’);
snippetDiv.className = ‘snippet’;
snippetDiv.textContent = result.snippet;
resultItem.appendChild(titleDiv);
resultItem.appendChild(snippetDiv);
resultsDiv.appendChild(resultItem);
});
})
.catch(error => {
console.error(‘Error fetching data:’, error);
document.getElementById(‘results’).textContent = ‘An error occurred while fetching results.’;
});
}
“`
—
### **Why This Works**
1. **CORS Compliance**: Your frontend communicates with your backend (`localhost:3000`), which has no CORS restrictions. The backend fetches data from the external API (`serpapi.com`) and returns it to the frontend.
2. **Security**: Hides your API key from the client, reducing the risk of misuse.
—
If you’re unable to set up a backend, you can use a CORS proxy service (like `cors-anywhere`) as a temporary solution, but it’s not recommended for production due to security risks.
(lollms_env) C:UsersSarahCALCUTRON WORK>node server.js
C:UsersSarahCALCUTRON WORKserver.js:2
const fetch = require(‘node-fetch’);
^
Error [ERR_REQUIRE_ESM]: require() of ES Module C:UsersSarahCALCUTRON WORKnode_modulesnode-fetchsrcindex.js from C:UsersSarahCALCUTRON WORKserver.js not supported.
Instead change the require of index.js in C:UsersSarahCALCUTRON WORKserver.js to a dynamic import() which is available in all CommonJS modules.
at Object. (C:UsersSarahCALCUTRON WORKserver.js:2:15) {
code: ‘ERR_REQUIRE_ESM’
}
Node.js v20.10.0
This error occurs because `node-fetch` is an ES module and requires an import statement instead of `require`. Here’s how to fix it:
—
### **Solution**
1. Update your `server.js` to use ES modules by changing the file extension to `.mjs` and using `import` syntax:
– Rename the file: `server.js` → `server.mjs`
– Update the code:
“`javascript
import express from ‘express’;
import fetch from ‘node-fetch’;
const app = express();
const PORT = 3000;
app.use(express.json());
app.get(‘/api/search’, async (req, res) => {
const { query } = req.query;
const apiKey = ‘0d17888ebb6912c39b6abb5c18b3cc183691deee6fb444bb7aa5e9fd22772a7c’;
if (!query) {
return res.status(400).json({ error: ‘Query parameter is required’ });
}
const url = `https://serpapi.com/search.json?engine=ebay&q=${encodeURIComponent(query)}&api_key=${apiKey}`;
try {
const response = await fetch(url);
const data = await response.json();
res.json(data);
} catch (error) {
console.error(‘Error fetching data:’, error);
res.status(500).json({ error: ‘Failed to fetch data’ });
}
});
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
“`
2. Run the script:
“`bash
node server.mjs
“`
—
### **Alternative: Enable ES Modules in Node.js**
If you prefer to keep the `.js` extension, you can enable ES module support in your project by doing the following:
1. Add `”type”: “module”` to your `package.json`:
“`json
{
“name”: “your-project-name”,
“version”: “1.0.0”,
“main”: “server.js”,
“type”: “module”,
“scripts”: {
“start”: “node server.js”
},
“dependencies”: {
“express”: “^4.18.2”,
“node-fetch”: “^3.3.1″
}
}
“`
2. Update `server.js` to use `import`:
“`javascript
import express from ‘express’;
import fetch from ‘node-fetch’;
// … rest of the code as above
“`
3. Run the script:
“`bash
npm start
“`
—
### **Explanation**
– `node-fetch` v3+ is an ES module and does not support `require`. To use it, you must:
– Use `import` instead of `require`.
– Enable ES module support by renaming files to `.mjs` or setting `”type”: “module”` in `package.json`.
Let me know if you encounter further issues!
Content-Security-Policy: The page’s settings blocked an inline style (style-src-elem) from being applied because it violates the following directive: “default-src ‘none’” inject.js:44:36
Content-Security-Policy: The page’s settings blocked the loading of a resource (img-src) at http://localhost:3000/favicon.ico because it violates the following directive: “default-src ‘none’” FaviconLoader.sys.mjs:175:20
The errors you’re encountering are related to **Content Security Policy (CSP)**, which restricts the sources from which content like styles, scripts, and images can be loaded. The errors indicate that the page’s settings block the loading of inline styles and images due to the policy defined in the `Content-Security-Policy` header.
Here’s how you can resolve these CSP issues:
### **Solution**
1. **Modify CSP to Allow Inline Styles and External Resources**
If you have control over the server that serves your page (such as the Node.js server), you can modify the CSP to allow resources from specific sources.
In your server setup (assuming you’re using Node.js and Express), you can add the necessary CSP headers to allow inline styles and resources from specific domains like `localhost`.
For example, you can use the `helmet` package in your Express server to control the CSP:
1. **Install Helmet**:
“`bash
npm install helmet
“`
2. **Modify your `server.js` (or `server.mjs` if using ES modules)** to include the appropriate CSP headers:
“`javascript
import express from ‘express’;
import fetch from ‘node-fetch’;
import helmet from ‘helmet’;
const app = express();
const PORT = 3000;
// Set up Content Security Policy (CSP)
app.use(helmet.contentSecurityPolicy({
directives: {
defaultSrc: [“‘self'”], // Only allow content from the same origin
styleSrc: [“‘self'”, “‘unsafe-inline'”], // Allow inline styles
scriptSrc: [“‘self'”, “‘unsafe-inline'”], // Allow inline scripts
imgSrc: [“‘self'”, “http://localhost:3000”], // Allow images from the same origin and localhost
fontSrc: [“‘self'”], // Allow fonts from the same origin
},
}));
app.use(express.json());
app.get(‘/api/search’, async (req, res) => {
const { query } = req.query;
const apiKey = ‘0d17888ebb6912c39b6abb5c18b3cc183691deee6fb444bb7aa5e9fd22772a7c’;
if (!query) {
return res.status(400).json({ error: ‘Query parameter is required’ });
}
const url = `https://serpapi.com/search.json?engine=ebay&q=${encodeURIComponent(query)}&api_key=${apiKey}`;
try {
const response = await fetch(url);
const data = await response.json();
res.json(data);
} catch (error) {
console.error(‘Error fetching data:’, error);
res.status(500).json({ error: ‘Failed to fetch data’ });
}
});
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
“`
– The `helmet.contentSecurityPolicy` middleware is used to set the CSP headers, allowing resources like inline styles (`’unsafe-inline’`) and images from `localhost`.
2. **If You Don’t Control the Server** (e.g., if it’s hosted elsewhere)
If you don’t have control over the server, you won’t be able to change the CSP headers directly. In this case, here are a couple of options:
– **Use External CSS/JS Files**: Move the inline styles and scripts into separate external files. This can bypass the `’unsafe-inline’` restriction in the CSP.
– **Disable CSP in the Browser (for Development Only)**: You can temporarily disable CSP in your browser for testing by using a browser extension like [CSP Disable](https://chrome.google.com/webstore/detail/csp-disable).
—
### **Explanation of the Changes:**
1. **`’unsafe-inline’` in `style-src` and `script-src`**: This allows inline styles and scripts, which the browser would otherwise block due to the CSP policy.
2. **Allowing `localhost` for `img-src`**: The error you’re seeing indicates that the favicon is being blocked. Adding `localhost:3000` to the `img-src` directive allows the loading of images (like favicons) from that domain.
This approach should resolve the CSP errors you’re facing. Let me know if you need further clarification!
cannot get
The error **”Cannot GET”** typically occurs when the server cannot find the route you are trying to access. This could be due to a few reasons:
1. **Incorrect Route or URL**: The route you’re trying to access doesn’t exist or isn’t set up properly on the server.
2. **Server is not running**: Your server might not be running or might have crashed.
3. **Incorrect method (GET vs POST)**: You’re trying to access a route with an HTTP method that isn’t configured for that route.
Let’s go through a few steps to troubleshoot and resolve the issue.
### 1. **Verify Your Routes**
Check if you’re trying to access the correct route. Based on the previous code I provided, your route is `/api/search`. Ensure you’re making a request to `http://localhost:3000/api/search`.
– For example, if you’re using the browser, type `http://localhost:3000/api/search?query=sega` (with your query parameter).
– If you’re accessing the route through JavaScript (using `fetch`), ensure you’re making the request to the correct URL.
### 2. **Check the Server Logs**
Ensure that your Express server is running and that it’s listening on port `3000`:
“`bash
Server is running on http://localhost:3000
“`
If the server is running properly, try accessing the route again.
### 3. **Check Method Type**
If you’re trying to access a POST route with a GET request (or vice versa), you’ll get this error. Ensure that the method you’re using (GET, POST, etc.) matches the one configured in the server.
In your code, the route `GET /api/search` is defined, so you should be sending a `GET` request, not `POST`.
### 4. **Use the Correct URL Format**
If you’re sending a request through the browser or with JavaScript (fetch), make sure the query parameter is properly passed. For example:
“`javascript
fetch(‘http://localhost:3000/api/search?query=sega’)
“`
### 5. **Check for Typos in Your Code**
Ensure that the route name in the `server.js` matches the URL you’re trying to access. For example, if you have:
“`javascript
app.get(‘/api/search’, async (req, res) => {
// logic
});
“`
Make sure you are accessing the URL correctly, such as `http://localhost:3000/api/search`.
### 6. **Ensure Server is Running Properly**
Sometimes, the server might crash or not be running. You can restart your server with:
“`bash
node server.js
“`
or if you’re using ES modules (`.mjs` file):
“`bash
node server.mjs
“`
—
### **Example Correct Request**
If you want to test the search API with the query `sega`, try using the following URL in your browser or through fetch:
“`plaintext
http://localhost:3000/api/search?query=sega
“`
Make sure your server logs show that it’s receiving the request. You should see:
“`plaintext
Server is running on http://localhost:3000
“`
### **Test with Curl (Alternative)**
You can also test the endpoint using `curl` from the command line:
“`bash
curl “http://localhost:3000/api/search?query=sega”
“`
—
If you still get the **”Cannot GET”** error after checking the points above, let me know the exact context (e.g., how you’re accessing the server, your code for the request), and I can help further debug it!
This is how the code started https://serpapi.com/ebay-search-api
It seems you’re trying to use the SerpApi eBay search API based on the [SerpApi documentation](https://serpapi.com/ebay-search-api), and you’re encountering issues with making the API request and receiving the correct data.
To integrate it correctly, I’ll help you by simplifying the approach. Here’s a step-by-step guide to help resolve your issue.
### 1. **Make Sure Your API Key is Correct**
Ensure you are using a valid API key from SerpApi. You can test this by manually making a request via your browser or `curl` to ensure your API key is functioning:
“`bash
curl “https://serpapi.com/search.json?engine=ebay&q=sega&api_key=YOUR_API_KEY”
“`
Replace `YOUR_API_KEY` with your actual API key. If you see a valid response, the API key is working.
### 2. **Ensure Your Server is Set Up Correctly to Proxy the Request**
Since you’re running a Node.js server, you likely want to avoid **CORS issues** by proxying the request through your server. Here’s a basic example of how you can set this up using **Express**:
### Server-side Setup (Node.js)
1. **Install dependencies**:
If you’re using Express, install the necessary packages:
“`bash
npm install express node-fetch
“`
2. **Create the server**:
Here’s a simple setup for the `server.js` (or `server.mjs`) to handle the API call from the client to SerpApi:
“`javascript
import express from ‘express’;
import fetch from ‘node-fetch’; // Import node-fetch for making requests to SerpApi
const app = express();
const PORT = 3000;
const apiKey = ‘YOUR_SERPAPI_API_KEY’; // Replace with your actual SerpApi API key
// Route to handle eBay search queries
app.get(‘/api/search’, async (req, res) => {
const query = req.query.query; // Get query parameter from the client
if (!query) {
return res.status(400).json({ error: ‘Query parameter is required’ });
}
// Construct the SerpApi URL with the query and API key
const url = `https://serpapi.com/search.json?engine=ebay&q=${encodeURIComponent(query)}&api_key=${apiKey}`;
try {
const response = await fetch(url);
const data = await response.json();
// Return the fetched data to the client
res.json(data);
} catch (error) {
console.error(‘Error fetching data:’, error);
res.status(500).json({ error: ‘Failed to fetch data’ });
}
});
// Start the server
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
“`
3. **Run the Server**:
Run the server by executing:
“`bash
node server.js
“`
### 3. **Client-side Setup (HTML/JS)**
Now, on your client side (the HTML and JavaScript), you can make a `GET` request to your own server, which will proxy the request to SerpApi. Here’s an updated version of the HTML and JS code:
“`html
body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
.search-container { width: 80%; margin: 20px auto; }
.result-item { border: 1px solid #ddd; margin-bottom: 15px; padding: 10px; }
.title { font-weight: bold; }
.snippet { color: #555; }
eBay Search
async function searchEbay() {
let query = document.getElementById(‘searchQuery’).value.trim();
if (!query) {
alert(‘Please enter a search term!’);
return;
}
// Proxy request to the server which will forward it to SerpApi
const url = `http://localhost:3000/api/search?query=${encodeURIComponent(query)}`;
try {
const response = await fetch(url);
const data = await response.json();
let resultsDiv = document.getElementById(‘results’);
resultsDiv.innerHTML = ”;
if (!data.organic_results || data.organic_results.length === 0) {
resultsDiv.textContent = ‘No results found.’;
return;
}
data.organic_results.forEach(result => {
const resultItem = document.createElement(‘div’);
resultItem.className = ‘result-item’;
const titleDiv = document.createElement(‘div’);
titleDiv.className = ‘title’;
const link = document.createElement(‘a’);
link.href = result.link;
link.target = ‘_blank’;
link.textContent = result.title;
titleDiv.appendChild(link);
const snippetDiv = document.createElement(‘div’);
snippetDiv.className = ‘snippet’;
snippetDiv.textContent = result.snippet;
resultItem.appendChild(titleDiv);
resultItem.appendChild(snippetDiv);
resultsDiv.appendChild(resultItem);
});
} catch (error) {
console.error(‘Error fetching data:’, error);
document.getElementById(‘results’).textContent = ‘An error occurred while fetching results.’;
}
}
“`
### Key Updates:
1. **Backend (Node.js)**: The `server.js` file handles the request to SerpApi and proxies it to the client.
2. **Client (HTML/JS)**: The client now sends a `GET` request to `http://localhost:3000/api/search`, and your server sends the data back to the client.
### 4. **Testing**
1. Run the server with:
“`bash
node server.js
“`
2. Open the HTML file in your browser. Enter a search term like `sega` and click the “Search” button. You should see the results fetched from eBay through SerpApi.
—
### **Common Issues to Check:**
1. **API Key Validity**: Double-check your SerpApi key.
2. **CORS**: The proxy server (Node.js) ensures that CORS issues are avoided.
3. **Ensure the server is running**: Check that your Express server is running and accessible at `http://localhost:3000`.
Let me know if you run into any other issues or need further clarification!
Content-Security-Policy: The page’s settings blocked an inline style (style-src-elem) from being applied because it violates the following directive: “default-src ‘none’” inject.js:44:36
Content-Security-Policy: The page’s settings blocked the loading of a resource (img-src) at http://localhost:3000/favicon.ico because it violates the following directive: “default-src ‘none’”