跨域的说明以及proxy反向代理以上就是跨域出来的报错什么叫跨域？协议头、域名、端口有一个不一样，就叫跨域 http

以上就是跨域出来的报错

什么叫跨域？

协议头、域名、端口有一个不一样，就叫跨域
www.axiqwr.com/home/
- 前面的 http:// 叫协议头
- www.axiqwr.com 叫域名
- 端口是跟在域名后面，如果省略了http就是80，https就是443
- 后面的 /home 叫路径
如果完整写法是
- www.axiqwr.com:80/home
  - :80 就是端口

例如，现在有个网站叫 https://www.xxx.com/1.html

对于下列网址判断是否跨域

域名	是否跨域
www.xxx.com/1.html	是，因为协议头不一样
www.xxxx.com/1.html	是，因为域名不一样
shop.xxx.com/1.html	是，因为域名不一样
shop.xxx.com:449/1.html	是，因为端口不一样
www.xxx.com/3.html	不是跨域，路径不一样不算跨域

跨域带来的问题
- 浏览器不允许使用ajax访问跨域资源
如何解决跨域？
- 正式上线，都是需要后端解决
- 解决办法有三种：
  1. 让后端设置CORS，允许我们的域名访问
  2. 把打包后的前端项目跟接口放到同一个服务器同一个端口
  3. 让后端改接口，改成jsonp的接口（现在基本不用，因为后端改了接口，我们的请求代码也要改）
- 纯前端来解决上线阶段的跨域问题，那么直接打人
  - 就算退一万步让前端解决，那前端自己也要搭一个服务器，写服务器的代码搭建一个转发的接口，然后还要设置CORS

反向代理解决跨域

用法：
1. 把基地址给一个标识，例如 /api
2. 此时发现，它是发到当前域名下的/api里了，但是我希望有个服务器，能转发到 http://localhost:3000，就要写配置文件
3. 来到 vue.config.js，找到 devServer，在里面加
```
    // 设置反向代理的功能
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        // 代表把真正请求的域名，替换成上面写的localhost:3000
        changeOrigin: true
      }
    }
```
  - 这句话的意思是识别所有路径上带 /api 的ajax请求，然后把这个请求用代理服务器转发到 localhost:3000

proxy里的pathRewrite说明

pathRewrite用来替换路径的
什么时候需要用的？
- 其实可以避免使用，也就是说不一定要用它
- 明明我的接口在域名后面要接的是 /api，但是你的基地址非要/oo，那么到时候请求的地址，就变成了 localhost:520/oo/sys/login，此时如果仅仅只是替换域名，是远远不够的，因为替换域名只会变成 localhost:3000/oo/sys/login，但真正的接口地址是 localhost:3000/api/sys/login，所以这种情况下，就需要替换路径，把/oo替换成/api

写法是

proxy: {
    '/oo': {
        // 替换协议头域名和端口那部分
        target: 'http://localhost:3000',
        changeOrigin: true,
        // 路径替换
        pathRewrite: {
            '^/oo': '/api'
        }
    }
}