摘要：
跨域问题是由浏览器的同源策略引起的。浏览器引入了同源策略，以防止XSS和CSRF攻击。具体配置如下：服务器｛listen80；服务器名域名；根###；位置/｛try_files$uri$uri//index.html；//解决HTML5History模式直接访问子路由404｝位置^~/api的问题/｛proxy_pass域名或ip地址：port/；//当添加/添加与api开头匹配的请求端口时，将删除该api/添加完全访问接口地址，这可以与后端商定｝｝其他跨域解决方案可以自己在线搜索。我只是记下我的问题
产生跨域问题的原因
跨域是因为浏览器的同源策略所导致的。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。浏览器引入同源策略主要是为了防止XSS，CSRF攻击。
常见跨域问题的解决方式
- 使用jsonp
- 服务端代理
- 服务端设置
Request Header头中Access-Control-Allow-Origin为指定可获取数据的域名
本地开发模式
如果是本地开发模式下 就没有必要再去麻烦后端去解决一下跨域问题。vue 本地开发提供了一个很好的解决跨域问题 请求转发
如果是vue脚手架找到vue.config.js中配置,如果是自己搭的开发环境找到对应的配置文件(大部分应该都在config文件夹下的index.js)
devServer: { proxy: { '/api': { //匹配api开头的走代理 target: process.env.VUE_APP_BASE_API, // 接口地址 changeOrigin: true, //允许跨域 pathRewrite: { '^/api': '' //重新路由，访问后端接口不一定是api 开头的这个时候就可以改变 } } } },
线上开发
因为我们这边计划 前端统一打包分发多个地区，而不是各个地区分别去线上打包，提高版本发布效率，而且保证线上各个地区代码一致性.又因为各个地区接口地址也是独立的,所以接口地址不能写在配置文件中。
所以在各个地区的nginx服务器做了代理转发。具体配置如下：
server { listen 80; server_name 域名; root ####; location / { try_files $uri $uri/ /index.html; //解决 HTML5 History 模式直接访问子路由404问题 } location ^~/api/ { proxy_pass 域名或者ip地址:端口/; //匹配api开头的请求 端口后面加 / 请求的时候会把api去掉 不加 / 会带上完整的访问接口地址，这个可以和后端约定 } }
其他的跨域解决方案可以自行到网上搜搜 我这边只是把自己遇到的问题做个笔记