跨域报错

最新推荐文章于 2024-04-24 11:22:40 发布

故事予你

最新推荐文章于 2024-04-24 11:22:40 发布

阅读量490

点赞数 1

文章标签： javascript 前端 ajax

本文链接：https://blog.csdn.net/weixin_55101030/article/details/127232683

版权

文件上传

前端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/401.js"></script>
</head>
<body>
    <input type="file" name="" id="upload" >
    <button id="btn">确认上传</button>
    <img src="http://localhost:3000/img/upload.png" alt="" width="100px" height="100px">
</body>
</html>
<script>
    $(function(){

        //确认上传
        $("#btn").click(function(){
            $.ajax({
                url:"/users/upload_sure",
                type:"post",
                success(res){
                    if(res.code==200){
                        alert("上传成功")
                    }
                }
            })
        })
        //预上传
        $("#upload").change(function(){
            let files=this.files;
            let fd=new FormData();
            //如果是单个文件
            //参数1：和后端匹配
            //参数2：文件对象
            fd.append("file",files[0])
            //如果是传递多个文件
            // for(let i=0;i<files.length;i++){
            //     fd.append("file",files[i])
            // }
            $.ajax({
                url:"/users/upload_temp",
                type:"post",
                data:fd,
                contentType:false,
                processData:false,
                success(res){
                    $("img").attr("src","http://localhost:3000/temp/"+res.file.filename)
                }
            })
        })
    })
</script>

后端：文件上传

let {uploadFiles, moveFiles, deleteFiles}=require('../utils/handleFiles')

//临时上传
let filename=""
async function upload_temp(req, res, next) {
  let upload=uploadFiles()
  upload(req,res,err=>{
     if(!err){
         //成功之后
         let file=req.files[0];
         //赋值filename用于确认上传
         filename=file.filename;
         res.send({
          code:200,
          file
         })
     }else{
        res.send({
          code:500
        })
     }
  })
}

//确认上传
async function upload_sure(req, res, next) {
  let fromPath="./public/temp";
  let toPath="./public/img"
  let obj={
    fromPath, toPath, filename
  }
  //移动
  moveFiles(obj)
  //删除
  deleteFiles("./public/temp")

  //操作数据库

   res.send({
    code:200
   })

}

跨域

跨域报错

Access to XMLHttpRequest at 'http://localhost:3000/users/login?username=&password=' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

浏览器的同源策略

为了安全性

同源：协议、IP地址、端口port 三个东东必须一样，只要有一个或多个不一样，则不同源

不同源只针对以下情况报错：
1 ajax 不能发送成功
2 cookie 不能获取
3 dom不能操作

http://192.168.13.13:8080/aa/bb...

以下均为跨域
https://192.168.13.13:8080/aa/bb...
http://192.168.13.14:8080/aa/bb...
http://192.168.13.13:8081/aa/bb...

解决跨域问题

1 jsonp (只支持get提交)


原理：利用 src属性不受跨域影响而实现

前端：
$(function(){
            $.ajax({
                url:"http://localhost:3000/stus/getStus",
                dataType:"jsonp",
                success(res){
                    console.log(res);
                }
            })
        })
后端：
  res.jsonp({
    code: 200,
    stus
  })
}

2 cors (支持所有提交)

跨域资源共享:在服务器端设置允许跨域 (后端处理)

app.js

var allowCrossDomain = function (req, res, next) {
  // 设置允许跨域访问的请求源（* 表示接受任意域名的请求）
  res.header("Access-Control-Allow-Origin", "*");
  // 设置允许跨域访问的请求头
  res.header("Access-Control-Allow-Headers", "X-Requested-With,Origin,Content-Type,Accept,Authorization");
  // 设置允许跨域访问的请求类型
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  // 同意 cookie 发送到服务器（如果要发送cookie，Access-Control-Allow-Origin 不能设置为星号）
  res.header('Access-Control-Allow-Credentials', 'true');
  next();
};




//代表public下的静态资源路径
app.use(express.static(path.join(__dirname, 'public')));

//允许跨域
app.use(allowCrossDomain);

//拦截生效
//  app.use(jwtAuth)

//配置一级路由
app.use('/users', usersRouter);
app.use('/stus', stusRouter);
app.use('/test', testRouter);
app.use('/clas', clasRouter);