开发必遇的问题 --- 跨域问题

最新推荐文章于 2024-02-17 22:58:47 发布

原创最新推荐文章于 2024-02-17 22:58:47 发布 · 469 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #webpack #javascript #ajax #网络

学习笔记专栏收录该内容

7 篇文章

订阅专栏

本文深入解析了跨域问题的本质，即浏览器同源策略导致的请求限制，并提供了多种解决方案，包括前端Webpack配置、中间件Nginx反向代理及后端CORS策略，适合前后端分离项目的开发人员参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、什么是跨域问题

当前页面的 协议、域名、端口，这三者之一与请求 url的不同，即为跨域

在这里插入图片描述

如 协议不同

http://www.baidu.com
https://www.baidu.com

如 域名不同

https://www.baidu.com
https://taobao.com

如 端口不同

http://localhost:5500/index.html
http://localhost:6700/index.html

2、为什么会出现跨域问题

出于浏览器的同源策略限制，所谓同源就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

以前开发很少出现跨域问题，因为基本都是后端连同前端的一起开发的，

现在是前后端分离的开发模式，可能前端放在这个地址，后端接口放在那个地址，就会出现跨域问题

3、如何解决跨域问题

举个例子，现在前端使用 webpack的项目，进行网络请求

/* 网络请求的js代码 */
let xhr = new XMLHttpRequest();
xhr.open('get', 'http://www.xxxxxxxx.xxx/xxx', true);
xhr.onload = function() {
  console.log(xhr.response)
}
xhr.send()

/* webpack.config.js 的配置文件 */
const path = require('path')

module.exports = {
  // entry： 入口    output：出口
  entry: './src/main.js',
  output: {
    // path: 绝对路劲 ， 需要动态获取路劲
    // path.resolve(__dirname, 'dist') --> 将获取当前项目的位置， 与dist进行拼接
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  }
}

果不其然，遇到了跨域问题

在这里插入图片描述

3.1、前端：Webpack proxy

使用webpack的 proxy的方式来解决跨域问题，就是使用一种代理的方式，将网络请求代理为你要请求的接口

/* 将请求方式改变为 本地的 http://localhost:5501/api/users */
let xhr = new XMLHttpRequest();
xhr.open('get', '/api/users', true);  // 改变
xhr.onload = function() {
  console.log(xhr.response)
}
xhr.send()

/* webpack.config.js 的配置文件 添加 proxy的代理模式 */
const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  devServer: {
    proxy: {  // 代理
      '/api': { // 将 /api 开头的代理为 target 的路径
        target: 'http://www.xxxxxxxx.xxxx',
        pathRewrite: {'/api': ''}  // 去除/api这个字符串
      }
    }
  }

}