跨域问题

跨域问题

浏览器为了网络安全性, 有一个同源策略, 必须域名, 端口, 协议三个都相同, 才认为是同源的, 是安全可靠的, 允许ajax请求数据

为了能够成功的拿到数据, 跨域有三种常见的解决方案:

• jsonp
  原理: 利用script标签的 src 属性, 跨域请求服务器资源, 后台要返回函数调用
  缺点: 只能是get请求，有大小限制。实际开发几乎不用
• cors 跨域资源共享
  原理: xhr2.0允许跨域资源共享, 后台需要设置响应头
  缺点: 浏览器兼容性 (IE10+)
• 反向代理
  原理: 服务器给服务器发请求, 服务器之间没有跨域问题, 没有同源策略，不受限制
  1. nginx 代理 (实际上线中常用)
  2. webpack 代理 (开发时, 临时解决跨域问题)

webpack配置反向代理

在vue.config.js中配置

module.exports = {
  devServer: {
    open: true,
    proxy: {
      '/api': {
        target: 'http://xxxx.net/',
        pathRewrite: { '^/api': '' },
        secure: true, // 默认值  true  可以不配
        changeOrigin: true  // 默认值 true  可以不配
      }
    }
  },
}

webpack的反向代理代码配置好了之后，修改一下baseURL

// 第一种：在request中修改 baseURL 
const baseURL = '/api'
const request = axios.create({
  baseURL,
  timeout: 5000,
  transformResponse: [function (data) {
    try {
      return JSONBig.parse(data) //处理大数
    } catch {
      return data
    }
  }]
})

// 第二种：或者修改你的.env.development文件
# 只会在yarn serve文件下读取 给不同环境配置不同的变量
#  以 VUE_APP_ 开头的变量
VUE_APP_URL = "/api"

参数说明:

1. target 代理到的目标地址
2. pathRewrite 路径重写
3. secure: true 将不接受在 HTTPS 上运行且证书无效的后端服务器。 (默认值: true)
   如果需要接收证书无效的后端服务器数据，可以这样修改配置为 false
4. changeOrigin: true (默认值: true)
   默认情况下，代理时会保留主机头的来源，可以将 changeOrigin 设置为 true , 如果设置成true, 发送请求头中host会设置成target。

注意事项：
开发阶段中，暂时解决跨域问题。项目上线，webpack反向代理的配置就会失效。
参考： https://cli.vuejs.org/zh/config/#devserver-proxy

配置 nginx 反向代理

注意: 实际上线的系统, 一般为 Linux 系统, 用的nginx软件包安装会稍有不同, 但是整体步骤和 windows 系统的 nginx配置一致

• nginx不要安装在中文目录下。下载地址：http://nginx.org/en/download.html

• 打开配置文件，如下图

  
  
  image.png
• 新增的代码 大约在46行 ，每行结尾都要有 `；符号

    location /api {
            rewrite  ^.+api/?(.*)$ /$1 break;
               include  uwsgi_params;
            proxy_pass   https://www.xxxxx.cn:444;#此处修改为自己的请求地址
        }

• 执行yarn buld打包，把dist里的资源放到 nginx的html文件中

image.png

• 启动nginx，双击会闪动一下就是启动了。 默认在 80 端口 。注意80端口不要被占用

image.png

• 通过 http://localhost:80 即可访问
• 如果这个过程中有再修改nginx中的配置文件。要记得关闭线程，再重新打开。可以通过任务管理器。也可以执行这条命令：taskkill /f /t /im nginx.exe

一般为 Linux系统。还是有点区别的。