后端：跨域方式

最新推荐文章于 2024-04-14 11:25:34 发布

小强有个dream

最新推荐文章于 2024-04-14 11:25:34 发布

阅读量162

点赞数

分类专栏：后端

本文链接：https://blog.csdn.net/qq_36413371/article/details/105585829

版权

后端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

复制下面代码，如果能获得接口接口说明不存在跨域

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  
  <script>
    var url = 'https://www.baidu.com:299/focus/getfocus' // 接口地址,此处为参考接口
    $.ajax({
      type: 'get',
      url: url,
      success: function(res){
        console.log(res) // 能拿到数据，代码不存在跨域问题
      },
      error: function(err){
        console.log(err)
      }
    })
  </script>
</body>

</html>

cors

nodejs设置允许所有域名跨域(下面代码放在请求前)：

app.all("*", function (req, res, next) {
    //设置允许跨域的域名，*代表允许任意域名跨域
    res.header("Access-Control-Allow-Origin", "*");
    //允许的header类型
    res.header("Access-Control-Allow-Headers", "content-type");
    //跨域允许的请求方式 
    res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
    if (req.method.toLowerCase() == 'options')
        res.send(200);  //让options尝试请求快速结束
    else
        next();
})

如果请求服务器已经配置了，还是跨域
请添加图片描述
在这里插入图片描述
那就得看，发送请求时配置的请求头字段是否在ACCESS-Control-Allow-Headers里面
2. 代理跨域

Nodejs 中使用http-proxy-middleware实现代理跨域（ /api前缀的请求都走代理）

// 前端需要在webpack.config.js或package.json中配置
vue中实现的代理（只需要前端配置）

const proxyObj = {}
proxyObj['/'] = {
  target: 'http://localhost:8085',
  changeOrigin: true,
  pathRewrite: {
    '^/': ''
  }
}

module.exports = {
  //基本路径
  publicPath: './',
  // //输出文件目录
  outputDir: './mingxingwang',

  devServer: {
    host: 'localhost',  //本地域名
    port: 8080,//本地端口号
    // proxy: proxyObj
    proxy: {
      'Api/': { // "/api"---拦截以“/api”开头的接口地址
        target: "http://star.zongye.top",//要跨域的域名
        ws: true,
        changeOrigin: true,//是否开启跨域
        pathRewrite: {  //本身的接口地址没有‘/api’,这种通用前缀，所以要rewrite，如果本身有则去掉                 '^/api':' '    //使用'^/api':' '   可以把接口中的虚拟/api去掉。                                   这项
          //本身接口中没有/api，使用/api和'^/api':' '的作用：既能拥有正确的跨域标识，又能在请求接口的时候去掉/api。
          "^/Api": ""
        }
      }
    }
  }
}