VUE跨域

一、什么是跨域？

• 跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议，端口，域名。只要这个3个中有一个不同就是跨域。
• 这里列举一个经典的列子：
  • 协议跨域
    http://a.baidu.com访问https://a.baidu.com；
  • 端口跨域
    http://a.baidu.com:8080访问http://a.baidu.com:80；
  • 域名跨域
    http://a.baidu.com访问http://b.baidu.com；

二、解决方案？

• proxyTable
  • 这里vue脚手架生成的标准项目为准。一般在项目config目录下面有个index文件。里面格式如下

'use strict'
const path = require('path')
module.exports = {
    dev: {
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
            '/api': {
                target: 'http://localhost:7001',//后端接口地址
                changeOrigin: true,//是否允许跨越
                pathRewrite: {
                    '^/api': '/api',//重写,
                }
            }
        },
        host: '192.168.0.104',
        port: 8081,
        autoOpenBrowser: false,
        errorOverlay: true,
        notifyOnErrors: true,
        poll: false,
        useEslint: true,
        showEslintErrorsInOverlay: false,
        devtool: 'eval-source-map',
        cacheBusting: true,
        cssSourceMap: false,
    },

}

• 上面配置中，我们根据实际情况只需要修改proxyTable对于配置即可。假设我后端请求地址是http://localhost:7001，所有api的接口url都以/api开头。所以首先需要匹配所有以/api开头的.然后修改target的地址为http://localhost:7001。最后修改pathRewrite地址。将前缀 ‘^api’ 转为 ‘/api’。如果本身的接口地址就有 ‘/api’ 这种通用前缀，就可以把 pathRewrite 删掉。注意这个方式只能在开发环境中使用。
• JSONP 也可实现跨域，不常用且VUE不适用
• CORS
  • CORS即跨源资源共享，它定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。服务器端配置
• Nginx反向代理
  • 反向代理简单来说就是真实的服务器不能直接被外部网络访问，所以需要一台代理服务器，而代理服务器能被外部网络访问的同时又跟真实服务器在同一个网络环境，当然也可能是同一台服务器，端口不同而已。
  • 首先下载openresty插件，解压后，找到conf文件夹下的nginx.conf文件，修改location/ 下的路径

    	worker_processes  1;
    	events {
    	    worker_connections  1024;
    	}
    	http {
    	    include       mime.types;
    	    default_type  application/octet-stream;
    	    sendfile        on;
    	    keepalive_timeout  65;
    	    server {
    	        listen       80;
    	        server_name  localhost;
    	        location / {
    	           proxy_pass http://192.168.1.1 访问的接口路径
    	        }    
    	    }
    	
    	
    	    
    	
    	}
    	 ```
    

  • 打开CMD输入命令 Nginx.exe启动 Nginx
  • 保存配置文件后启动Nginx，这样当我们访问localhost的时候，就相当于访问localhost:8080了