VUE之proxy配置实现跨域

什么是跨域

要了解跨域,首先得知道浏览器的同源策略。

同源策略:是由Netscape提出的一个安全策略,能够阻挡恶意文档,保护本地数据。它能限制一个源的文档或脚本对另一个源的交互,使得其它源的文档或脚本,无法读取或修改当前源。

是否同源:当两个url的域名、协议和端口均相同。

举例来说:url: http://127.0.0.1:80/demo/01.html 中组成部分如下图所示:

url 是否同源 原因

 http://127.0.0.1:80/demo/02.html 

 http://127.0.0.1:80/demo2/01.html 

同源 协议、域名、端口均相同,只是文件地址不同
http://127.0.0.1:90/demo/01.html 不同源 端口不同
http://127.1.1.1:80/demo/01.html 不同源 域名不同
https://127.0.0.1:80/demo/01.html 不同源 协议不同
http://127.0.0.1/demo/01.html 同源 http:// 默认端口是 80

 

不同协议有不同的默认端口,当未指定端口时,则使用默认端口。

跨域:能实现在不同源之间的资源交互。

为什么要跨域:因为所有的资源有可能不在同一个域内,比如一个公司有很多子域,中间的通信就需要跨域。

vue项目跨域vue.config.js文件配置

1. publicPath配置

publicPath是部署时的基本url,一般情况下vue项目起什么名称,publicPath就赋值什么名称。

假设一个项目的初始地址为: http://127.0.0.1:80/,若是配置上publicPath: "/demo",则项目的初始地址则会变成http://127.0.0.1:80/demo/。

vue打包后的静态文件资源需要访问,所以需要一个文件路径放置vue的打包文件,后端nginx中对应配置的也是这个地址。

2. devServer.proxy代理配置

该字段主要是为了实现前后端通信的,当前后端分离开发,为了让前端开发人员在开发时访问到后端的接口,需要进行nginx配置实现跨域请求。

参考这个同学的文章:vue配置反向代理 devServer配置proxy,说明如下:

// vue.config.js文件
module.exports = {
//.....devServer: {host: 'localhost',port: 8080,proxy: {"/api": {target: "http://www.xxx.com", // 请求到/api/xx 就会被代理http://www.xxx.com/api/xxx//  secure: false, // 如果是https接口,需要配置这个参数changeOrigin: true, // 接口跨域 需打开这个参数pathRewrite: {'^/api': '', // 忽略前缀/api  则会被代理到http://www.xxx.com/xxx},}}},
}

 

其实很好理解,简单来说就是给实际的接口路径做了一层代理。

”/api”含义:匹配以”/api”开头接口,

target参数含义:默认将上面的"/api"拼接到该值的后面,映射成代理的实际路径。

举例:请求接口时如果写的是“/api/xxx”,使用代理后生成的实际请求路径就是’http://www.xxx.com/api/xxx’。

pathRewrite参数含义:路径重写,如果要请求的接口里面没有公共的api,直接从根目录开始的,那就需要把"/api"去掉或换成其它别的字符。

 

你可能感兴趣的:(VUE,vue.js,javascript,前端)