Access to image at 'http://127.0.0.1:8300/media/b002_dimension/b002_08_problemComplain/qd_car_photo/id4/id4_qd_r.png' from origin 'http://127.0.0.1:8301' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
时间: 2023-12-14 21:03:54 浏览: 28
这是一个常见的跨域资源共享(CORS)问题。 CORS 是一种安全机制,用于限制从一个源加载的 web 页面或脚本如何与来自不同源的资源进行交互。在这种情况下,您的页面从源 `http://127.0.0.1:8301` 加载,但尝试加载来自 `http://127.0.0.1:8300` 的图像,因此浏览器会阻止请求。要解决这个问题,您需要在 `http://127.0.0.1:8300` 的服务器上配置响应头,以允许来自 `http://127.0.0.1:8301` 的请求。具体来说,需要在响应中包含 `Access-Control-Allow-Origin` 头,值为 `http://127.0.0.1:8301`。这将允许来自 `http://127.0.0.1:8301` 的请求访问图像资源。
相关问题
如何在VUE中使用fabric.js加载保存在后端‘http://127.0.0.1:8300/media/b002_dimension/b002_08_problemComplain/qd_car_photo/id4/id4_qd_r.png’的图片,并在用户点击图片点某个位置时添加标记点
首先,你需要在Vue项目中安装fabric.js。可以使用以下命令进行安装:
```
npm install fabric --save
```
然后,在Vue组件中引入fabric.js,并创建一个canvas元素来加载图片和添加标记点。你可以使用以下代码:
```javascript
<template>
<div>
<canvas ref="canvas"></canvas>
</div>
</template>
<script>
import fabric from 'fabric';
export default {
mounted() {
const canvas = new fabric.Canvas(this.$refs.canvas);
// 加载图片
fabric.Image.fromURL('http://127.0.0.1:8300/media/b002_dimension/b002_08_problemComplain/qd_car_photo/id4/id4_qd_r.png', function(img) {
canvas.add(img);
canvas.setWidth(img.width);
canvas.setHeight(img.height);
});
// 添加标记点
canvas.on('mouse:down', function(options) {
const pointer = canvas.getPointer(options.e);
const circle = new fabric.Circle({
left: pointer.x,
top: pointer.y,
radius: 5,
fill: 'red',
selectable: false
});
canvas.add(circle);
});
}
};
</script>
```
这里的代码中,我们首先在mounted生命周期中创建了一个canvas元素,并在其中加载了图片。然后,我们通过监听canvas的mouse:down事件,在用户点击canvas时添加了一个红色的圆形标记点。
请注意,你需要将图片的地址替换为你自己后端存储的图片地址。还要注意,如果图片跨域,可能需要在后端进行相关的配置以允许跨域请求。
URL :http://127.0.0.1:8000/api/user_sign/怎么拆分?
URL:http://127.0.0.1:8000/api/user_sign/ 可以拆分为以下几部分:
1. 协议(Protocol):http
- URL的协议部分指定了使用的网络协议,通常是HTTP或HTTPS。
2. 主机名(Host):127.0.0.1
- 主机名部分指定了要访问的服务器的域名或IP地址。
- 在这个例子中,主机名是一个本地回环地址(loopback address)127.0.0.1,表示是本地计算机。
3. 端口(Port):8000
- 端口部分指定了要访问的服务器上的进程或服务。
- 在这个例子中,端口号是8000,表示要访问的服务器上的某个服务或进程监听在8000端口。
4. 路径(Path):/api/user_sign/
- 路径部分指定了服务器上要访问的具体资源的路径。
- 在这个例子中,路径是/api/user_sign/,表示要访问的是位于服务器上的/api/user_sign/路径下的资源。
综上所述,URL http://127.0.0.1:8000/api/user_sign/ 可以拆分为:
- 协议:http
- 主机名:127.0.0.1
- 端口:8000
- 路径:/api/user_sign/
这些部分共同描述了要访问的服务器资源的位置和访问方式。在实际开发中,可以根据需要修改和设置URL的不同部分来实现对不同资源的访问。