Vue 跨域问题解决

简单描述一下跨域是如何产生的

首先我们要明确的是：跨域问题只是在浏览器中产生的一种现象。跨域是浏览器安全方面的限制，如果客户端与服务端不在一个域名下是不能进行http通讯的，如果域名相同端口不通依然跨域。当我们在本地局域网开发时；IP不通也会导致跨域问题，当然；IP相同端口不同也会跨域。

如何解决，以下几种方式取其一即可：

第一种方式：服务端加请求头（遵循cors跨域资源共享原则）

header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

第二种方式：vue开发环境proxy代理解决（服务端客户端同源）

例如我们要请求的Api是：https://www.baidu.com/client/hello

1、找到Vue项目中的：config > index.js  在proxyTable中添写如下配置：

proxyTable: { 
  '/api': {  
    target: 'https://www.baidu.com', //源地址 
    changeOrigin: true, //改变源 
    pathRewrite: { 
      '^/api': 'https://www.baidu.com' //路径重写 
      } 
  } 
}

2、使用axios请求数据时直接使用 “/api”关键字 代替 https://www.baidu.com 如下所示：

getData () { 
 axios.get('/api/client/hello', function (res) { 
   console.log(res) 
 })

第三种：Vue生产环境跨域解决

生产环境解决代理问题的最好方式是Nginx，我们要用Nginx的代理机制来解决跨域问题，Nginx配置如下

server {
        listen       8000;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        location /api {
            proxy_pass https://www.baidu.com;  #代理的域名
            add_header 'Access-Control-Allow-Origin' '*'; 
            add_header 'Access-Control-Allow-Credentials' 'true'; 
        }
        location  / {
            root   /var/www/vue/;
            index  index.html index.htm;
        }
    }

解释：

  https://www.baidu.com 是我们要代理域名

  add_header 是增加返回头  解决跨域问题

我们请求的时候，在请求域名的前面就要加上“/api”字符串，请求示例如下

test.post('/api/product/getData',params)

文章讲的不是很详细，有问题留言交流吧