跨域问题的解决

前端开发的工程师门，只要不是单纯的写静态页面，只要不是还停留在原始的后台嵌套jsp等模式中，开发工程中都会遇到跨域的问题；

今天简要整理下解决跨域的几个方法；

1.无论是开发还是生产模式------后台配置（CORS）参数

//指定允许其他域名访问 header("Access-Control-Allow-Origin:*");

//响应类型 header("Access-Control-Allow-Methods:POST");

// 响应头设置header("Access-Controhttps://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS#ders:x-requested-with,content-type");

 

2.在开发环境中使用时，可以配置代理，通过node的服务器代理发送请求（服务器之间是不存在跨域的）

在这以Vue工程为例  使用axios的代理配置（其他的类似）

在config/index.js中

proxyTable: {
   '/api': {
     target:'http://www.xxxx.com',
     changeOrigin: true,
     pathRewrite: {
       '^/api': '/'
     }
   }
}

--------------------修改脚手架的东西后一定要重新运行编译npm run dev 

3.直接设置chrome允许跨域请求（本地开发调试）

1、创建一个Chrome的启动快捷方式；

2、右键点击快捷方式属性，然后在目标路径后面，添加以下参数：

 --disable-web-security  --user-data-dir=C:\MyChromeDevUserData

在C盘对应的位置新加文件夹

3、通过刚才创建的快捷方式打开Chrome

这种方式打开的Chrome会有一个安全警告，说明我的添加的参数起作用了。

这时候再打开我们本地的HTML，其中的Ajax跨域请求就可以正常调试了。

mac版：命令行执行 以下命令（红色为自己用户名）即可
                

open -n /Applications/Google\ Chrome.app/ --args --disable-web-security  --user-data-dir=/Users/yourName/MyChromeDevUserData/