首先要理解什么是跨域?
出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)
老生常谈的事情了,这里简单总结以下。
本质
比如vue.config.js配置
// 配置 webpack-dev-server 行为。
devServer: {
open: true,
host: '0.0.0.0',
port: 9100,
https: false,
hotOnly: false,
// 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理
proxy: {
'/aa': {
target: 'http://10.10.1.69',
secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true,
}
}
vscode中使用http-server插件来跨域
全局安装:npm install http-server -g
使用http-server,解决跨域的方法是在启动http-server时,加上 --cors 跨域头: http-serrver --cors
添加了跨域头
http-server参数说明
开启一个端口为8888的http服务器,设置允许跨域访问和自动打开: http-server --cors -p 8888 -o
比如nginx
server {
listen 8081;
server_name localhost;
location / {
root E:\Work\project;
index index.html index.htm;
}
location /aa {
proxy_pass http://10.10.1.69;
}
首先后端没有跨域问题,简单的说就是自己写一个后端的代理服务来承接哪些跨域的地址同时返回相应的数据比如:字符串、媒体文件等。
举个例子:arcgis for js 就有一个iis的proxy.ashx文件用来做代理。