解决开发过程中的跨域问题

在开发过程中，有以下几种方式：

# 使用本地代理

在开发环境中，可以使用开发服务器（如Webpack Dev Server、Create React App的development server等）的代理功能。这些服务器允许你设置一个代理规则，将特定路径的请求转发到不同的源上。

// webpack.config.js 中的代理配置示例
module.exports = {
  // ...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:4000', // 目标服务器地址
        changeOrigin: true, // 更改原始主机标头以与target匹配
        pathRewrite: {
          '^/api': '' // 重写路径
        }
      }
    }
  }
  // ...
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 使用JSONP方式

script标签不受同源策略影响，所以可以利用script的src属性来发起跨域的请求

<script src="http://api.com/api/jsonp?callback=success&name=zhangsan&sge=20"></script>

// 定义一个回调success
<script>
	function success(data){
        console.log("获取到数据");
        console.log(data)
    }
</script>

1
2
3
4
5
6
7
8
9

除开script外，form和img标签也可以作为跨域载体，详情使用见使用form进行跨域、使用img进行跨域

# 使用三方插件

使用三方浏览器插件，如Access-Control-Allow-origin、CORS Everywhere等，可以临时修改浏览器发送的HTTP请求头，允许跨域请求。

# 修改浏览器同源策略

以chrome为例，在启动浏览器时添加启动参数--disable-web-security既可，如下：

PS C:\Program Files\Google\Chrome\Application> ./chrome.exe --disable-web-security

# 服务器CORS跨域

后端API服务器正确设置了CORS响应头,控制API服务器，可以配置它以允许来自开发环境的特定域名的请求。

# 使用`websocket`跨域

websocket使用的是独立的websocket传输协议，不同与http协议，websocket协议允许跨域访问

var io = websocket.connect(‘[http://xx.xxx.xx.xx:8443](http://127.0.0.1:3001)’);

io.on(‘data’,function(data){

//根据返回值修改页面

});

1
2
3
4
5
6
7

使用websocket需要服务器端支持websocket，在实际项目过程中websocket多用于客户端通信很少用于跨域访问。

上次更新: 2025/09/05, 8:09:00

← 文件上传时的各种二进制数据关系 vue自定义入口html文件→