如何解决跨域（jsonp、Access-Control-Allow-Origin、vue配置反向代理、服务端http-prosy-middleware配置正向代理）

YF-SOD

已于 2022-07-28 10:27:49 修改

阅读量523

点赞数 1

分类专栏： Nodejs 文章标签：如何解决跨域问题 jsonp解决跨域设置请求头解决跨域 vue配置反向代理解决跨域服务端配置正向代理解决跨域

于 2022-06-29 15:22:13 首次发布

本文链接：https://blog.csdn.net/AIWWY/article/details/125511738

版权

Nodejs 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

jsonp

利用html中script脚本不跨域解决。

<!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>
</head>
<body>
    <script>
        function getData(data) {
            console.log(data)
        }
    </script>
    <script src="http://localhost:8080"></script>
</body>
</html>

服务端代码

const http = require('http')
const server = http.createServer((req, res) =>
    let url = req.url
    //设置'Access-Control-Allow-Origin': '*'解决跨域
    //res.writeHead(200, {
    //    'content-type': 'application/json;charset=utf-8',
    //    'Access-Control-Allow-Origin': '*'
    //})
    res.write('getData("hello")')
    res.end()
})
server.listen(8080,()=>{
    console.log('localhost:8080')
})

此时会打印hello字符串，注意通常的get和post请求服务端的数据返回的是‘getData("hello")'的字符串，只有在script中才会作为js代码执行。

设置请求头Access-Control-Allow-Origin:*

例如上图注释部分。

配置代理

vue配置反向代理

Vue-CLI入门（webpack入门、安装配置Vue-CLI（命令、手动、自动版本）、使用Vue-CLI创建组件和Vuex和Vue-router、配置跨域请求数据以及配置webpack添加插件等）_YF-SOD的博客-CSDN博客

http-proxy-middleware模块配置正向代理

服务端利用http-proxy-middleware模块配置正向代理。

const http = require("http");
const { createProxyMiddleware } = require("http-proxy-middleware");
const server = http.createServer((req, res) => {
  const urlStr = req.url;
  if (/\/ajax/.test(urlStr)) {
    const proxy = createProxyMiddleware("/ajax", {
      tartget: "https://lady.vip.com", //将http://localhost:8080替换为https://lady.vip.com
      changeOrigin: true,
    });
    proxy(req, res);
  } else if (/\/ap/.test(urlStr)) {
    const proxy2 = createProxyMiddleware("/api", {
      target: "https://m.lagou.com",
      changeOrigin: true,
      pathRewrite: {
        "^/api": "", //重写路径/api替换为空串即http://localhost:8080/api替换为https://lady.vip.com
      },
    });
    proxy2(req, res);
  }
});
server.listen(8080, () => {
  console.log("localhost:8080");
});