网站备案名称要求,电影片头在线制作网站,快速学习网站制作,教学类网站怎么做什么是跨域
要了解跨域#xff0c;首先得知道浏览器的同源策略。
同源策略#xff1a;是由Netscape提出的一个安全策略#xff0c;能够阻挡恶意文档#xff0c;保护本地数据。它能限制一个源的文档或脚本对另一个源的交互#xff0c;使得其它源的文档或脚本#xff0c;…什么是跨域
要了解跨域首先得知道浏览器的同源策略。
同源策略是由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去掉或换成其它别的字符。
